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

Question

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

Я использую jQuery UI datepicker на рабочем столе моего приложения 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 изменится правильно. Я не могу понять, как изменить ярлык, не открывая виджет.

Answer 1

Пока я не менял цвет колес, я нашел способ изменить ярлык некоторое время назад и хотел поделиться тем, кто может захотеть сделать что-то подобное. При вызове 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"); 
    } 
}); 

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