Change the Date Format to yyyy-mm-dd in Datepicker

by

Recently I was working on a project and there is a requirement came in front of me.

The requirement was to change the date format of input type date field. I had tried to change, but it hasn’t worked. So, I had used bootstrap datepicker.

Bootstrap datepicker is very good because it allows you to change the format as per your requirements.

So, I am going to share how you can change the date format of datepicker.

Let’s see.

Step 1. First include jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Step 2. Include Bootstrap Datepicker component

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>

Step 3. Write markup to create an input field

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

Step 4. Write Script to Add Datepicker Functionality

<script> 
$( document ).ready(function() {     
$("#from-datepicker").datepicker({          
format: 'yyyy-mm-dd' //can also use format: 'dd-mm-yyyy'     
});      
});  
</script>

Now you can change datepicker format with the above given script. If you have any query feel free to comment.

Leave a Comment