How to use moment.js to change date format in jQuery ?
Last Updated :
16 May, 2022
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 =
</ script >
< script src =
</ script >
< link rel = "stylesheet" href =
</ 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:
Share your thoughts in the comments
Please Login to comment...