Изменение цвета колеса даты в скроллере даты и времени Mobiscroll в зависимости от условия

В моей организации каждый день работает одна из четырех смен (A-D), и смены связаны с цветами (красный, синий, зеленый, желтый).

Я использую средство выбора даты пользовательского интерфейса jQuery в представлении рабочего стола моего приложения ASP.NET MVC, и я могу использовать параметр beforeShowDay, чтобы изменить цвет фона дней в календаре, чтобы пользователи могли сразу видеть, какая смена работает каждый день.

$(".datePicker").datepicker('option', 'beforeShowDay', colorDays);

function colorDays(date) {
    var today = new Date();
    // set object to midnight, for comparing against passed in date
    today.setHours(0,0,0,0);
    var shift = getShift(date);
    var cssClass = "";
    // don't style unpickable dates in the past
    if (date >= today) {
        cssClass = "datepicker-shift-" + shift.toLowerCase();                
    }
    return new Array(true, cssClass, shift + " Shift");
}

Можно ли сделать то же самое с Mobiscroll, чтобы фон Дневного колеса менял цвет в зависимости от смены, которая работала в этот день?

В качестве альтернативы, если это невозможно, можно изменить метку дня, включив в нее название смены (A–D).

Я попытался добавить onChange в свой экземпляр mobiscroll:

$(".datePicker").mobiscroll().date({
    theme: 'jqm',
    onChange: function (valueText, inst) {
        var date = new Date(valueText);
        var shift = getShift(date);
        inst.init({ dayText: "Day - " + shift });
    }
});

Событие onChange срабатывает, но виджет mobiscroll немедленно закрывается. Если вы снова откроете, метка dayText изменится правильно. Я не могу понять, как изменить метку, оставив виджет открытым.


mobiscroll
person Nick Silberstein    schedule 17.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хотя я так и не изменил цвет колеса, я нашел способ изменить метку некоторое время назад и хотел поделиться со всеми, кто захочет сделать что-то подобное. При создании экземпляра mobiscroll я использую следующий код:

$(".datePicker").mobiscroll().date({
    theme: 'jqm',
    display: 'bottom',
    onChange: function(valueText, inst) {
        var selectedDate = new Date(valueText);
        $('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
    },
    onShow: function (html, valueText, inst) {
        var selectedDate = new Date(valueText);
        $('.dwv.ui-header').html(valueText + " - " + getShift(selectedDate) + " shift");
    }
});

Это дает мне метку для средства выбора даты/даты и времени, которая выглядит как «09/04/2014 - смена B», которая обновляется по мере изменения выбранной даты.

person Nick Silberstein    schedule 09.04.2014