如何更改 HTML 中日期输入的日期格式

Question

I created this code sample for get the date from a date picker. I need to push the date value into the paragraph element as default (YYYY-MM-DD) but I need the date input to show the date as Month-dd-YY (ex: Oct-25-18)

<input type="date" id="date" /> <br/>
<button id="btn" onclick="show()">Ok</button><br/>
<p id="p"></p>

<script type="text/javascript">

    function show(){
        var x = document.getElementById('date');
        x.innerHTML = x.value;
        document.getElementById('p').innerHTML = x.value;
    }
</script>

I tried with x.innerHTML = x.value but not working.

How I can do this?

Answer 1

Try parsing to milliseconds then to JavaScript date. Something like this:

var x = document.getElementById('date');
var msec = Date.parse(x);
var d = new Date(msec);
document.getElementById("p").innerHTML = d;

Near the bottom of this page: https://www.w3schools.com/js/js_date_formats.asp

Answer 2

You can use the code mentioned below. If having a hard time understanding it. Ping me :)

<input type="date" id="date" /> <br/>
<button id="btn" onclick="show()">Ok</button><br/>
<p id="p"></p>

<script type="text/javascript">

function show(){
    var x = document.getElementById('date');
    var temp_date = new Date(x.value);
    var date = temp_date.getDate();
    var month = temp_date.getMonth() + 1;
    var year = temp_date.getFullYear();
    format_date = month + " " + date + " " + year;
    x.innerHTML = x.value; // - not sure what you were trying
    // to achieve but x here is input not other element.
    document.getElementById('p').innerHTML = format_date;
}

Answer 3

You can easily do it by using CSS and js with using HTML 5 basic date type input

 $("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format( this.getAttribute("data-date-format") ) ) }).trigger("change")

 input { position: relative; width: 150px; height: 20px; color: white; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <input type="date" data-date="" data-date-format="MMM-DD-YY" value="2020-08-29">