logo标签列表

突出显示jQuery日期选择器中的日期

jquerycssdatepicker
5
使用jQuery日期选择器，与此页面相关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>
3个回答
3

您也可以尝试使用Kendo UI。它有一个日历小部件和DatePicker小部件，可以接受日期数组，从而轻松自定义小部件的模板。

Kendo UI - 日历

Kendo UI Web是免费的，日历和日期选择器是Web套餐的一部分。 - Durty
如果您能提供有关“Kendo UI Web”的更多详细信息，请在此处提供。例如链接或文章等。谢谢。 - Sampath
Kendo UI的下载页面显示Web包是开源的（GPL v3）。http://www.kendoui.com/download.aspx您可以在此处找到所有演示文稿：http://demos.kendoui.com/web/overview/index.html以及文档：http://docs.kendoui.com/api/web/ui我目前正在我的论文中使用这个框架，我对它非常满意，您也可以购买DataViz包以获取商业图表。虽然我还没有尝试过，但它看起来不错。 - Durty
谢谢，我一定会尝试这个。+1 - Sampath
@user1822719 - 你尝试过修改小部件的month.content属性吗？如果您的小部件需要应用复杂的样式，则应定义一个模板供小部件使用。从那里开始，一切都取决于您的CSS（类），您可以在模板中使用条件（if / else语句），以便实现所需的外观。 - Durty
显示剩余5条评论
2

你可以使用以下代码片段进行尝试(这是一个样例):

CSS

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

Jquery

$(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:"选项。

请查看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;
   }

});​

欲了解更多信息，请查看在jQuery UI DatePicker中突出显示特定日期

希望这能对您有所帮助。

情况是在jquery.datepick.js中没有beforeShowDay这样的函数，如何克服这个问题？我在网上看到了一个解决方案，但对我不起作用。 - kbitsoft
@user1822719，我已经在jsfiddler上更新了我的帖子，并提供了可工作的示例，请查看。 - Sampath
@user1822719，Jquery文档中提到了“beforeShowDay:”选项。请查看我的更新部分以获取更多详细信息。 - Sampath
我明白你的意思，但我不知道如何将jsfiddler源代码引入我的页面，因为jquery.datepick.js会出现问题。请给我一个下载链接，类似于jQuery UI 1.8.18文件或其他文件，以获取jsfiddler源代码。 - kbitsoft
@user1822719 好的。也许你的jQuery版本比较旧了。尝试使用我在更新2中展示的方式。 - Sampath
显示剩余3条评论
0
使用onDate回调函数来实现目标。
示例：点击“逐日”选项卡>国家日（CSS）以查看演示。

http://keith-wood.name/calendarsPicker.html

$('#nationalPicker').calendarsPicker({ 
    onDate: nationalDays,
    showTrigger: '#calImg'}); 

var natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
    [5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], 
    [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 

function nationalDays(date, inMonth) { 
    if (inMonth) { 
        for (i = 0; i < natDays.length; i++) { 
            if (date.month() == natDays[i][0] && date.day() == natDays[i][1]) { 
                return {dateClass: natDays[i][2] + '_day', selectable: false}; 
            } 
        } 
    } 
    return {}; 
}

参考：http://forum.jquery.com/topic/highlight-multiple-dates-on-keith-wood-jquery-datepick-plugin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接