2

私の組織では、毎日 4 つのシフト (A ～ D) のうちの 1 つが働いており、シフトは色 (赤、青、緑、黄色) に関連付けられています。

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) の名前を含めても問題ありません。

mobiscroll インスタンスに onChange を追加してみました:

$(".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");
    }
});

これにより、「2014 年 4 月 9 日 - B シフト」のような日付/日時ピッカーのラベルが表示され、選択した日付が変更されると更新されます。

于 2014-04-09T23:04:02.357 に答える