Question

在我的组织中，每天都有四个班次（A - D）中的一个工作，并且班次与颜色（红色，蓝色，绿色，黄色）相关联。

我在ASP.NET MVC应用程序的桌面视图中使用jQuery UI的datepicker，我可以使用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");
    }
});

这为我提供了日期/日期时间选择器的标签，看起来像＆＃34; 04/09/2014 - B shift＆＃34;，随着所选日期的变化而更新。

在Mobiscroll日期中更改日期轮的颜色;基于条件的时间滚动条

1 个答案: