根據條件更改Mobiscroll的日期和時間滾動條中的日期輪的顏色

在我的組織中，每天都有四個輪班（A-D）中的一個工作，輪班與顏色（紅色，藍色，綠色，黃色）。根據條件更改Mobiscroll的日期和時間滾動條中的日期輪的顏色

我在我的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標籤已正確更改。我無法弄清楚如何在保持小部件打開的情況下更改標籤。

來源

2013-05-17 Nick Silberstein

儘管我沒有最終改變車輪顏色，但我發現了一種方法來改變標籤，並且想要分享給任何可能想要做類似事情的人。當實例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"); 
    } 
});

這讓我對日期/日期選擇器，看起來像一個標籤「2014年4月9日 - B轉變」，即更新爲所選擇的日期改變。

來源

2014-04-09 23:04:02

根據條件更改Mobiscroll的日期和時間滾動條中的日期輪的顏色

回答

相關問題