Showing Invalid date in input field

Question

I am trying to change the default date format to DD/MM/YYYY. I have successfully did this. But it showing invalid date. When I select a date it's work well. But when I clear the date it's shows Invalid Date. How can I remove this error message.

$("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: black;
}

input:before {
    position: absolute;
    top: 5px; left: 6px;
    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: 16px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="" placeholder="s" data-date-format="DD/MM/YYYY"  name="tckt_issue_date">

https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format[enter link description here][1] — cool_benn, Sep 11 '18 at 07:27

Joseph_J · Accepted Answer · 2018-09-11T09:48:16.787

Updated Answer

The reason you were getting the invalid date error is because when you clear the date the input is passing an empty date to your jQuery function. When the value is given to the moment() it returns an error because it expects a valid date.

So you need to test for an empty value.

Working code:

$('#datePicker').on('change', function() {

      if(this.value){

        $(this).attr('data-date', moment(this.value, 'YYYY-MM-DD').format($(this).attr('data-dateformat')));

      } else{

        $(this).attr('data-date', '');

      }

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<input id="datePicker" type="date" data-date="" placeholder="s" data-dateformat="DD/MM/YYYY"  name="tckt_issue_date">

This code also properly updates the data-date attribute in the html.

@Mehedi Hasan Siam Please see the updated answer. Tested and working. — Joseph_J, Sep 11 '18 at 09:38

score 0 · Answer 2 · edited Sep 11 '18 at 19:12

0

This is already answered here you can can check.

Either you can change the format by jQuery or Javascript.

Get value from input via jQuery
Replace the this character - with / via jQuery string replace function
Then then finally assign it again to input value attribute value .attr(value, your-value);

edited Sep 11 '18 at 19:12

marc_s

732,580
175
1,330
1,459

answered Sep 11 '18 at 07:33

cool_benn

56
8

Mehedi Hasan Siam · Answer 3 · 2018-09-12T09:25:06.567

Here is the way how you can change the input field date format to DD/MM/YYYY

$("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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" data-date="" required placeholder="s" data-date-format="DD/MM/YYYY" value="2015-08-09" name="tckt_issue_date">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

Please always explain your code, how does it answer the question? What did you do? — Alexandre Elshobokshy, Sep 11 '18 at 08:42

Showing Invalid date in input field

3 Answers3