Question posted in
You can find the official documentation here.

How to show Date in Input type date from Ajax response? – Jquery ajax

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);
                    }
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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">
    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search