突出显示 jQuery datepicker 日期

Posted 2023-05-07

技术标签:

【中文标题】突出显示 jQuery datepicker 日期【英文标题】：Highlighting jQuery datepicker date 【发布时间】：2012-12-11 04:49:23 【问题描述】：

使用jQuery Datepicker，与本页相关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>

【问题讨论】：

【参考方案1】：

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

Kendo UI - Calendar

【讨论】：

Kendo UI Web 是免费的，Calendar 和 Datepicker 是 Web 包的一部分。如果您能提供更多关于“Kendo UI Web”的详细信息，请放在这里。作为类似的链接或文章。谢谢。 Kendo UI 的下载页面显示 Web 包是开源的 (GPL v3)。 kendoui.com/download.aspx 你可以在这里找到所有的演示：demos.kendoui.com/web/overview/index.html 和文档：docs.kendoui.com/api/web/ui 我目前在我的论文中使用这个框架，我对它非常满意，你也可以购买商业的 DataViz 包图表。虽然我还没试过，但看起来不错。谢谢。我一定会试试的。+1 我下载了它并完成了我的任务，但是内容复杂，很难选择什么是必要和不必要的例如：有一个名为“样式”的文件夹，但 datepicker 日历只需要它的样式\默认\ sprites.png【参考方案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

工作示例Here

Jquery 文档 说有 "beforeShowDay:" 选项。

查看Datepicker Widget 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;

);

更多信息请查看Highlight Specific Dates in jQuery UI DatePicker

希望对你有帮助。

【讨论】：

情况是在 jquery.datepick.js 中没有 beforeShowDay 之前没有这样的功能如何克服这个我在网上展示了这个解决方案，但对我不起作用 @user1822719 我已经用 jsfiddler 检查的工作示例更新了我的帖子。 @user1822719 Jquery 文档说有“beforeShowDay:”选项。查看我的更新部分了解更多详情。好的，我明白了，但我不明白如何让 jsfiddler 源代码进入我的页面，因为 jquery.datepick.js 做坏事。请给我一个 jsfiddler 的下载链接源代码类似于 jQuery UI 1.8.18 文件或其他文件 @user1822719 好的。可能是你的 jquery 版本是旧的。尝试像我在更新 2 上展示的那样使用。【参考方案3】：

使用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

【讨论】：

以上是关于突出显示 jQuery datepicker 日期的主要内容，如果未能解决你的问题，请参考以下文章

JQuery DatePicker，如何突出显示当前输入的日期？

在 jQuery Datepicker 上突出显示 MySql 日期

突出显示两个选定日期之间的日期 jQuery UI Datepicker

在 Jquery Datepicker 中动态更改突出显示的日期

在jquery UI datepicker中突出显示日期

jQuery UI Datepicker：今天也被选中时不要突出显示