jQuery Datepicker，选择多个日期并在选择时通过css标记它们，永久

Posted 2023-05-09

【中文标题】jQuery Datepicker，选择多个日期并在选择时通过css标记它们，永久

【英文标题】：jQuery Datepicker, select multiple dates and mark them via css at selection time, permanently

【发布时间】：2011-10-27 09:58:50

【问题描述】：

所以我花了一天时间开发和阅读（以其他方式）以使我的 jQuery 日期选择器能够选择和突出显示多个日期。

为此，我设法将选定的日期写入一个数组，该数组在一个简单的文本字段中可视化。

我无法做到的是永久修改日期选择器中所选日期的外观。

我已经实现了“beforeShowDay:”选项，它在加载日期选择器时可以正常工作，但当然不会在选择日期时直接调用。 为此我猜想，我需要刷新视图“onSelect”，但刷新无法正常工作。 现在，我有一些处理日期数组的小方法。

添加或删除日期后，我正在尝试刷新日期选择器。

选择日期后，我要么将其添加到日期数组中，要么将其从日期数组中删除。 另外，onSelect，我匹配选定的日期并尝试添加类（）。

但我想我又一次错过了一些东西，因为它没有显示在我的日期选择器中。

这是我现在的代码：

var dates = new Array();

function addDate(date) 
    if (jQuery.inArray(date, dates) < 0 && date) 
        dates.push(date);
    


function removeDate(index) 
    dates.splice(index, 1);


// Adds a date if we don't have it yet, else remove it and update the dates
// textfield
function addOrRemoveDate(date) 
    var index = jQuery.inArray(date, dates);
    if (index >= 0) 
        removeDate(index);
        updateDatesField(dates);
     else 
        addDate(date);
        updateDatesField(dates);
    
    jQuery(calContainer).datepicker("refresh");



    var calContainer = document.getElementById("calendar-container");

    jQuery(calContainer).datepicker(
        minDate : new Date(),
        dateFormat : "@",
        onSelect : function(dateText, inst) 
            addOrRemoveDate(dateText);

            jQuery(".ui-datepicker-calendar tbody tr td a").each(function() 
                if (jQuery(this).text() == inst.selectedDay) 
                    jQuery(this).addClass("ui-state-highlight");
                    jQuery(this).parent().addClass("selected");
                
            );
            // addTimeSelectorColumns(dates);
        ,
        beforeShowDay : function(_date) 
            var gotDate = -1;
            for ( var index = 0; index < dates.length; index++) 
                if (_date.getTime() == dates[index]) 
                    gotDate = 1;
                 else 
                    gotDate = -1;
                
            

            if (gotDate >= 0) 
                return [ true, "ui-datepicker-today", "Event Name" ];
            
            return [ true, "" ];
        
    );
function updateDatesField(dates) 

    if (dates.length > 0) 
        var tmpDatesStrArr = new Array();
        var dateString = "";
        var datesField = document.getElementById("dates");

        for ( var index = 0; index < dates.length; index++) 
            var dateNum = dates[index];

            var tmpDate = new Date();
            tmpDate.setTime(dateNum);

            dateString = tmpDate.getDate() + "." + tmpDate.getMonth() + "."
                    + tmpDate.getFullYear();
            tmpDatesStrArr.push(dateString);
        

        jQuery(datesField).val(tmpDatesStrArr);
    

（我仍然是 javascript/jQuery 的初学者，因此欢迎对我的编码提供任何帮助或提示，顺便说一句...）

【参考方案1】：

这取决于你是否想坚持使用 jQuery UI。如果您对其他库开放，则有一个支持多选的 jQuery Datepicker：jquery.datePicker with multiple select enabled。它可以省去你对 jQuery UI 的麻烦，因为它本身不支持多选。

编辑：

如果你的主库不是 jQuery，我认为你应该寻找一个独立的或依赖原型的库。 JS Calendar 看起来很有希望。它原生支持通过检测 Ctrl 键进行多选。

【讨论】：

嗯，约束是：1.) 原型和脚本也包含在项目中。 2.) 日期选择器是内联的。但我会试一试，谢谢！