2

在我的组织中，每天都有四个班次 (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 标签已正确更改。我不知道如何在保持小部件打开的同时更改标签。

4

1 回答 1

0

虽然我最终没有改变车轮颜色，但我前段时间找到了一种改变标签的方法，并想分享给任何可能想做类似事情的人。在实例化 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 - B shift”，随着所选日期的变化而更新。

于 2014-04-09T23:04:02.357 回答