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

Question

I have a Datepicker that has this format set, and is associated with a textbox on my page (ASP MVC View):

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

If the text field is originally empty, and I select a date from the control, and the date is saved in the dateFormat noted, when I click on my textbox again, the calendar opens to the date that was saved. Ex) "31-DEC-2020"

However, if text field already has a date with a format like "04/13/2020", a value that was saved to the text field (and database) before the picker was added to the page, when I click on the datepicker icon associated with the textbox, either the page locks up, or else the datepicker opens with today's date highlighted.

New dates set and saved with the datepicker control: no issue. Existing dates (in different format), and accessed by the datapicker control: there is the above problem.

Jeramiah Harland · Accepted Answer · 2020-01-24 21:33:50Z

1

There is a beforeShow option with Datepicker that I use for the following solution which can be viewed here.

For this, I took the existing value of the input element and convert it to a string that datepicker can interpret, then sets the date:

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

            }

        }
});

I'm not sure this is the best way to do it but it's a start. I hope it helps!

answered Jan 24, 2020 at 21:33

Jeramiah Harland

8648 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeDev Over a year ago

This is working perfectly for me! I really appreciate your quick and very helpful response. Thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related