Showing Invalid date in input field

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">

3 Answers
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.

moment()

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.

This is already answered here you can can check.

Either you can change the format by jQuery or Javascript.

-

/

.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.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>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.