时间戳

首页 > 解决方案 > 如何刷新日历中的事件日期（日期选择器）

javascript - 如何刷新日历中的事件日期（日期选择器）

问题描述

其实我有两个问题

1-我试图突出显示日历中的一些日期，但是，页面加载后样式不起作用，除非我点击日历然后它会起作用

2-当我保存一些文本时，我想刷新日历以突出显示这个新的事件日期，如果我只是回忆这个功能什么都没有发生，可能是因为我已经初始化了数据选择器

对于第一个问题，我在初始化 datepicker 后尝试添加这些命令 - $('.ui-datepicker-current-day').click(); - $("#datepicker").trigger("click"); -$('#datepicker').datepicker("refresh");

这是获取事件日期的代码

 function EventDates() {

       var apiURL = '@Url.Content("~")api/GeDate';
        var eventDates = {};

        $.ajax({
            url: apiURL,
            success: function (data) {
                $.each(data, function (i, item) {
                    //alert(item.Date1)
                    eventDates[new Date(item.Date1)] = new Date(item.Date1);
                });        
            }
        })
        // datepicker
        $('#datepicker').datepicker({
            numberOfMonths: [3, 1],
            dateFormat: "mm/dd/yy",
            onSelect: function (dateText, inst) {
                jQuery('#calendar_date').val(dateText);
                CheckDate();
            },
            beforeShowDay: function (date) {
                var highlight = eventDates[date];           
                if (highlight) {
                    return [true, "event", 'There is a text'];
                } else {
                    return [true, '', ''];
               }

            }
        });

        //   $('#datepicker').datepicker("refresh");

    }

function Save()
{

var params = [];
// globalDeptID
params.push({ name: "Date", value: $('#calendar_date').val()});
params.push({ name: "Message_E", value:$('#EN').val() });
params.push({ name: "CreatedBy", value: '@ViewBag.ID' });
params.push({ name: "ModifiedBy", value: '@ViewBag.ID'});
var apiURL = '@Url.Content("~")api/InsertAndUpdate';
$.ajax({
url: apiURL,
data: params,
type: "POST",
success: function (data, textStatus, jqXHR) {

swal("Success", "The message has been saved successfully.", "success"); EventDates(); 
$("#datepicker").datepicker("refresh");

},
error: function (err) {
//alert("An error occured. Could not submit your request.");
swal({
text: "An error occured.",
icon: "error"
});
}
})
}

正如您在保存功能中看到的那样，我在保存数据后回忆了 eventDates 的功能

EventDates(); 
$("#datepicker").datepicker("refresh");

标签： javascriptjqueryhtmldatepicker

解决方案

我找到了两个问题的解决方案

我将 datepicker 放入 ajax 调用中，第二个问题我销毁了 datepicker 然后我重新初始化了它

  $("#datepicker").datepicker("destroy"); 
   EventDates();

推荐阅读