How to change date formats in the input type date field

When we use input field type as the date it’s working initially as mm/dd/yyyy as date format it’ll work perfectly in desktop devices but when we change device like Mobile or iPads when we’re to use that and if we’ve changed that date format as dd/mm/yyyy it’ll not work and it’ll create an issue in a later stage.

Since in chrome browsers new release it’s strongly working as mm/dd/yyyy date formats we can not change this by simple HTML date type field.

Assume we’ve given format as dd/mm/yyyy and It’ll only work on desktop screens and it’ll stop working in Mobile it’s changed it’s formatted by default mm/dd/yyyy and your changes will stop working in these conditions.

For this, we can use a jQuery date picker, and in this jQuery date picker we can give any format we want

var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );// Setter$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );

We can give any format as we want in this datepicker and its field should always be as Text type but because of jQuery it’ll work as a date field and it shows you a calendar as we want.

<input type="text" id="datepicker" />

 <script>
   $(function() {
     $("#datepicker").datepicker();
   });
 </script>

After using this we’ll not face any issues in Mobile or iPad devices or any browsers like Microsoft Edge, Mozilla Firefox, etc.

For more reference, we can check https://jqueryui.com/datepicker/ documentation.