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

Question

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

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

如果文本字段最初是空的，我 select 来自控件的日期，并且该日期保存在注明的 dateFormat 中，当我再次单击我的文本框时，日历会打开到该日期那被保存了。例如）“2020 年 12 月 31 日”

但是，如果文本字段已经有一个格式类似于“04/13/2020”的日期，那么在将选择器添加到页面之前，该值已保存到文本字段（和数据库）中，当我单击与文本框关联的日期选择器图标，页面锁定，或者日期选择器打开并突出显示今天的日期。

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

Answer 1

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

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

$(".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);

            }

        }
});

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

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

Can Jquery UI Datepicker Display Date In a Format that is Different from the Format Date Was Originally Saved In?

jquery

jquery-ui

datepicker

jquery-ui-datepicker

bootstrap-datepicker