How to use moment.js to change date format in jQuery ?
Last Updated :
24 Sep, 2024
Using Moment.js to change date format in jQuery involves importing the Moment.js library and utilizing its functions to parse, manipulate, and format dates. You can easily convert dates into various formats by calling moment(date).format(desiredFormat) to display the date in your preferred format.
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/[email protected]/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: In this example we use Moment.js and jQuery to convert and display a selected date in three different formats. When the button is clicked, the date is reformatted into various patterns and displayed dynamically.
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/[email protected]/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:
Similar Reads
How to Use format() on a Moment.js Duration? The format() function can be used to convert moment objects into human-readable strings, but it does not directly format moment.duration objects. To format durations effectively, you need to work with moment objects by adding durations to a base date and then formatting the resulting date-time.Run t
3 min read
How to Change Date Format in jQuery UI DatePicker ? In this article, we are going to learn about the Datepicker in jQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. jQuery is widely famous for its m
2 min read
How to Format Date with Moment.js? Formatting dates is essential for presenting date and time information in a way that's readable and useful for users. Moment.js provides several methods for formatting dates from simple and predefined formats to more complex and localized representations.Below are different approaches:Table of Conte
2 min read
How to Format Date and Subtract Days Using Moment.js? Moment.js is useful in performing date computation and formatting in JavaScript applications. It provides a simple and intuitive API for parsing, validating, manipulating, and formatting dates. we are going to subtract days and format that. These are the following approaches to formatting dates and
2 min read
How to create a Date Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a date input area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†hr
1 min read