How to use moment.js to change date format in jQuery ?
Given a date, we need to change the format of the date using moment.js. To achieve this functionality, we can use moment().format() function.
moment() Function: The moment() function is used to create a moment from a string.
Syntax:
moment(String);
Parameter: It accepts a String as a parameter
Return Value: It returns the moment object.
format() Function: The moment().format() function is used to format the date. The format can be provided in string form which is passed as a parameter to this method.
Syntax:
moment().format(String);
Parameters: This function accepts a single parameter of string type, which defines the format.
Return Value: This function returns the date.
CDN Links:
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js”></script>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css”>
Approach:
- Firstly, add the jQuery, Moment.js, and Bootstrap CDN link to the script or download them from your local machine.
- Create an input for the date and button to submit.
- Now use the moment() method to convert the date into a moment object.
- Use the format() method to change the format of the date, following is the syntax for changing the format of the date to ‘DD-MM-YYYY’.
moment($("#date_val").val()).format('DD-MM-YYYY');
- Add some styling to the page using the bootstrap.
Formatting tokens for dates:
Token | Description | Example |
YYYY | 4-digit year | 2022 |
YY | 2-digit year | 22 |
MMMM | Full-length month | March |
MMM | 3 character month | Mar |
MM | The month of the year, zero-padded | 03 |
M | The month of the year | 3 |
DD | Day of the month, zero-padded | 02 |
D | Day of the month | 2 |
Do | Day of the month with numeric ordinal contraction | 2nd |
Example:
HTML
<!DOCTYPE html> < html > < head > < script type = "text/javascript" src = "https://code.jquery.com/jquery-1.9.1.min.js" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" > </ script > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" > </ head > < body > < div class = "container row my-2 mx-auto" > < input type = "date" data-provide = "datepicker" name = "date" id = "date_val" > < button type = "button" id = "datebtn" class = "btn btn-primary row ml-2" > Primary </ button > </ div > < div class = " w-25" > < ul class = "list-group" > < li class = "list-group-item " > DD-MM-YYYY : < span id = "format1" class = "text-primary" ></ span > </ li > < li class = "list-group-item " >DD MMMM YYYY : < span id = "format2" class = "text-primary" ></ span > </ li > < li class = "list-group-item " >DD/MM/YYYY : < span id = "format3" class = "text-primary" ></ span > </ li > </ ul > </ div > < script type = "text/javascript" > $("#datebtn").click(function () { var format1 = moment($("#date_val") .val()).format('DD-MM-YYYY'); $("#format1").text(format1); var format2 = moment($("#date_val") .val()).format('DD MMMM YYYY'); $("#format2").text(format2); var format3 = moment($("#date_val") .val()).format('DD/MM/YYYY'); $("#format3").text(format3); }); </ script > </ body > </ html > |
Output:
Contact Us