Changing input date data-type to DD/MM/YYYY instead of MM/DD/YYYY with require

Question

Hi guys I'm creating an application for a region where date format is only in DD/MM/YYYY while the default input type date format in MM/DD/YYYY

 Jquery CDN added
 Bootstrap CDN added
<form>
 <input type='date' id='date' name='date' required>
 <input type='submit'>
 </form>

I can do this by placing a placeholder of 'dd/mm/yyyy' in input because value is in format of yyyy-mm-dd that don't bother me but that require is creating problem. When a user gives wrong input in mm/dd/yyyy format it gives an error that date is incorrect so placing a placeholder will not work in this required case.

how can i change it to dd/mm/yyyy so it can work with required.

score 3 · Answer 1 · answered Aug 01 '17 at 02:52

According to Mozilla's article on the <input type="date"> element, the user's operating system locale will affect how the date is parsed. So if you got a hold of a computer with an operating system set to your target region, it should behave as expected.

On the other hand, browser support isn't that great for <input type="date">, so I wouldn't depend on it. Better to use a date library that supports localization to validate.

If you're just looking for valid dates (and don't care about mixing up Feb 1 and Jan 2, for example), you could use the pattern attribute, put a localized regex in there.

Or, another alternative, render the full date next to the field (January 5, 2017) as they type it.

Mozilla's article: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

score 1 · Accepted Answer · answered Aug 01 '17 at 03:38

1

Instead of this use jquery's Datepicker.IN Jquery's Datepicker You can set any date Format You want.

Add this code in script tags at the end of body

<script>$('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();</script>

Just Add These Cdn's in head section in your code

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

answered Aug 01 '17 at 03:38

Prince Arora

354
1
6
20

1

Thanks for datepicker, its working but still showing me data in mm/dd/yyyy format – Azeem112 Aug 01 '17 at 04:50
@Azeem112 set the date format according to your requirement ' dd-mm-yy' here – Prince Arora Aug 01 '17 at 07:15
thanks. It's working with this code $("#Date").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true }); – Azeem112 Aug 03 '17 at 09:23

Changing input date data-type to DD/MM/YYYY instead of MM/DD/YYYY with require

2 Answers2