How to make datepicker display value form Json string?

April 6, 2023

String date is being passed as JSON from the controller to the view. Problem is the datepicker is not displaying the value. How to do it?

function SetCalendar(id, str) {
    var strDate = document.getElementById(id);
    var dateVal = luxon.DateTime.fromFormat(str, "MM-dd-yyyy");
    strDate.value = dateVal;
}

Tried like this, not working, how to do this?

>Solution :

Assuming that your datepicker is a standard HTML input element with type="date", you need to set the value of the input element using the format "yyyy-MM-dd" instead of "MM-dd-yyyy". Also, you should convert the DateTime object to a string using the toISODate() method before setting the value of the input element.

function SetCalendar(id, str) {
    var strDate = document.getElementById(id);
    var dateVal = luxon.DateTime.fromFormat(str, "MM-dd-yyyy");
    strDate.value = dateVal.toISODate();
}

Note that some browsers may not support the date input type or the ISO date format, in which case you may need to use a third-party datepicker plugin or a polyfill library.