如何在 Ajax 响应的输入类型日期中显示日期？

Question

My control is,

<input type="date" id="DecDate" name="birthday">

I save it in db and can view it in this form ,

3/10/2020 12:00:00 AM

when i try to update same record i populate it in "DecDate" from response coming from Ajax in json format.

i tried this,

$('#DecDate').val(response.DecisionDate);

its not showing me any date.

I alert response it shows me same above date as " /Date(1583787600000)/ "

I dont know why it is showing differently on alert and how should i populate it in control.

EDIT:

 $.ajax({
                    type: "GET",
                    url: "@Url.Action("JqueryFillControl")",
                    contentType: "application/json; charset=utf-8",
                    data: { id: Id },
                    dataType: "json",
                    success: function (response) {
                        if (response != null) {

                            const d = new Date(response.DecisionDate);
                            const formattedDate = d.getFullYear() + '-' + ("0" + (d.getMonth() + 1)).slice(-2) + '-' + ("0" + d.getDate()).slice(-2)
                            $('#DecDate').val(formattedDate);
                        } else {
                            alert("Something went wrong");
                        }
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }

Answer 1

It is same time but showing in Epoch. You can verify it using below, https://www.epochconverter.com/

Use new Date(value) to convert it into Date object.

Follow this if needed.

How convert input type="date" in timestamp javascript-jquery

Answer 2

The date format used by HTML5 date control is like yyyy-mm-dd . So, that might be one of the issues here. So, you can convert the DecisionDate to Date object and get the proper date format to display in control like:

const d = new Date(response.DecisionDate.match(/\d+/)[0] * 1);
const formattedDate = d.getFullYear()+'-'+("0"+(d.getMonth()+1)).slice(-2)+'-'+("0"+d.getDate()).slice(-2)
$('#DecDate').val( formattedDate );

DEMO:

 const decisionDate = '/Date(1583787600000)/'; const d = new Date(decisionDate.match(/\\d+/)[0] * 1); const formattedDate = d.getFullYear()+'-'+("0"+(d.getMonth()+1)).slice(-2)+'-'+("0"+d.getDate()).slice(-2) $('#DecDate').val( formattedDate );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="date" id="DecDate" name="birthday">

Answer 3

So regarding your scenario, you can use moment.js which is a very good library for parsing, validating, manipulating, and displaying dates and times in JavaScript . Please refer to the below example:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<div id="date"></div>
<script type="text/javascript">
//var DecisionDate='3/10/2020 12:00:00 AM';
var DecisionDate='March 11 2020 12:00:00 AM';
var d=moment(DecisionDate).format('MM/DD/YYYY h:mm:ss a');
$("#date").text(d);     
alert(d);
</script>

Note: You would need to refer to the moment.js file either by installing it locally or using the CDN link provided in the demo.

Working DEMO: https://jsfiddle.net/01e7fwv8/