Jquery UI Datepicker可以以与最初保存的格式日期不同的格式显示日期吗？

Posted 2023-05-08

【中文标题】Jquery UI Datepicker可以以与最初保存的格式日期不同的格式显示日期吗？

【英文标题】：Can Jquery UI Datepicker Display Date In a Format that is Different from the Format Date Was Originally Saved In?

【发布时间】：2020-05-11 04:23:03

【问题描述】：

我有一个设置了这种格式的 Datepicker，并且与我页面上的一个文本框相关联（ASP MVC 视图）：

$(function () 
            $("#MyDateTextbox").datepicker(
                dateFormat: "dd-M-yy",
                showOn: "button",               
                buttonImage: "@Model.BaseURLOfSite" + "/Images/calendar.gif",
                buttonText: "Calendar"
            );
        );

如果文本字段最初是空的，并且我从控件中选择了一个日期，并且日期保存在指定的 dateFormat 中，当我再次单击我的文本框时，日历将打开到保存的日期。 例如）“2020 年 12 月 31 日”

但是，如果文本字段已经有一个格式为“2020 年 4 月 13 日”的日期，当我点击与文本框关联的日期选择器图标，页面锁定，或者日期选择器打开时突出显示今天的日期。

使用日期选择器控件设置和保存新日期：没问题。 现有日期（不同格式），并由数据选择器控件访问：存在上述问题。

【参考方案1】：

日期选择器有一个beforeShow 选项，我用于以下解决方案，可以是viewed here。

为此，我将输入元素的现有值转换为 datepicker 可以解释的字符串，然后设置日期：

$(".datepicker").datepicker(
        dateFormat: "dd-M-yy",
        showOn: "button",               
        buttonText: "Calendar",
        beforeShow: function(ele, obj)

            // Current value
            var existing_date = $(ele).val();

            // If it contains a / then it's not formatted right
            if(existing_date.indexOf('/') > -1)

                // Using new Date and Date.parse gives us
                // Mon Apr 13 2020 00:00:00 GMT-0500 (Central Daylight Time)
                var new_date = new Date(Date.parse(existing_date));

                // Set the date
                $(ele).datepicker("setDate", new_date);

            

        
);

我不确定这是不是最好的方法，但这是一个开始。希望对你有帮助！

【讨论】：

这对我来说非常有效！我非常感谢您快速且非常有帮助的回复。谢谢！