javascript - Showing Invalid date in input field - Stack Overflow

admin管理员组

文章数量:1400635

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=".1.1/jquery.min.js"></script>
<script src=".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">

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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">

• javascript
• php
• html

Share Improve this question Follow edited Sep 11, 2018 at 7:25 Mehedi Hasan Siam asked Sep 11, 2018 at 7:21 Mehedi Hasan SiamMehedi Hasan Siam 1,27233 gold badges1313 silver badges2929 bronze badges 2

• stackoverflow./questions/7372038/… link description here][1] – cool_benn Commented Sep 11, 2018 at 7:27
• This I have researched. – Mehedi Hasan Siam Commented Sep 11, 2018 at 7:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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.

This is already answered here you can can check.

Either you can change the format by jQuery or Javascript.

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

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./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./ajax/libs/moment.js/2.10.3/moment.min.js"></script>

本文标签： javascriptShowing Invalid date in input fieldStack Overflow