5

このページに関連するjQueryDatepickerを使用してhttp://keith-wood.name/datepick.html
配列で指定された日付を指定して強調表示したい 

ex: array("2012-12-24" => "red", "2012-12-24" => "green")

このアプローチをどのように取得しますか。

私の貧弱なコード

<style type="text/css">
    @import"jquery.datepick.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
    $(function () {
        $('#popupDatepicker').datepick();
        $('#inlineDatepicker').datepick({
            onSelect: showDate
        });
    });

    function showDate(date) {
        alert('The date chosen is ' + date);
    }
</script>
</head>
<body>
    <p>A popup datepicker
        <input type="text" id="popupDatepicker">
    </p>
    <p>Or inline</p>
    <div id="inlineDatepicker"></div>
4

3 に答える 3

3

剣道UIを試すこともできます。カレンダー ウィジェットと日付の配列を取る DatePicker ウィジェットがあり、ウィジェットのテンプレートを簡単にカスタマイズできます。

剣道UI - カレンダー

于 2012-12-25T10:14:53.983 に答える
2

コードベースで以下を試すことができます（これはサンプルです）

CSS

.Highlighted a{
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}

Jクエリ

$(document).ready(function() {
    var SelectedDates = {};
    SelectedDates[new Date('12/25/2012')] = new Date('12/25/2012');
    SelectedDates[new Date('05/04/2012')] = new Date('05/04/2012');
    SelectedDates[new Date('06/06/2012')] = new Date('06/06/2012');

    $('#txtDate').datepicker({
        beforeShowDay: function(date) {
            var Highlight = SelectedDates[date];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            }
            else {
                return [true, '', ''];
            }
        }
    });
});​

更新 1

作業例はこちら

Jquery ドキュメントには、「beforeShowDay:」 Optionがあると記載されています。

Datepicker ウィジェット API を確認する

更新 2:

以下のようにGoogle CDNを使用してjqueryを参照できます。したがって、jquery参照をコメントアウトして、以下のように取得します。

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"
            type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

更新 3:

以下、疑似コードのみ記載しました。Jquery構文に合わせて変更してください。

$(document).ready(function() {

$('#txtDate').datepicker({
    beforeShowDay: function(date) {

      //according to the date you have to decide which css should load.
        var Highlight = SelectedDates[date];
        var yourColor = whichColor(SelectedDates[date]);

        if (Highlight  && yourColor =='red') {
            return [true, "RedHighlighted", Highlight];
        }
        else if (Highlight   && yourColor =='green') {
             return [true, "GreenHighlighted", Highlight];
        }
        else {
            return [true, '', ''];
        }
    }
});


//return a color according to your date logic
 function whichColor(dateArray) { 

      return color;
   }

}); </p>

詳細については、jQuery UI DatePicker で特定の日付を強調表示するを参照してください。

これがお役に立てば幸いです。

于 2012-12-25T09:35:45.760 に答える