Aug
10
MomentJS – Quick Guide ”; Previous Next MomentJS – Overview MomentJS is a JavaScript library which helps is parsing, validating, manipulating and displaying date/time in JavaScript in a very easy way. This chapter will provide an overview of MomentJS and discusses its features in detail. Moment JS allows displaying of date as per localization and in human readable format. You can use MomentJS inside a browser using the script method. It is also available with Node.js and can be installed using npm. In MomentJS, you can find many easy to use methods to add, subtract, validate date, get the maximum, minimum date etc. It is an open source project and you can easily contribute to the library and add features in the form of plugins and make it available on GitHub and in Node.js. Features Let us understand in detail all the important features available with MomentJS − Parsing Parsing allows you to parse the date in the format required. Parsing of date is available in string, object and array. It allows you to clone the moment using moment.clone. There are methods available which gives the date output in UTC format. Date Validation Date Validation is very easy with MomentJS. You can use the method isValid() and check whether the date is valid or not. MomentJS also provides many parsing flags which can be used to check for date validation. Manipulation There are various methods to manipulate Date and Time on the moment object. add, subtract, startoftime, endoftime, local, utc, utcoffset etc., are the methods available which gives details required on date/time in MomentJS. Get/Set Get/Set allows to read and set the units in the date. It allows to change as well as read hour , minute, seconds, millisecond, date of month, day of week, day of year, week of year, month, year, quarter, week year, weeks in year, get/set, maximum , minimum etc. Get /Set is a very helpful feature available in MomentJS. Display Display provides formats to display date in different ways. There are methods available which tells the time from a given moment, from the current moment, difference between two moments etc. It allows to display date in JSON format, Array, Object, String etc. Date Queries Date Queries has easy to use methods which tells if the date is greater or lesser than the input, in between the dates given, is a leap year, is a moment, is a date etc. It is very useful with date validation. Durations Durations is one of the important features in MomentJS. It basically handles length of the time for given units. The humanize method available displays date in a human readable format. Internationalization Internationalization is yet another important features in MomentJS. You can display Date and Time based on locale. The locale can be applied to a specific moment if required. You will get a minified file from the MomentJS home site which has all the locales. In case you are dealing with a specific locale, you can also add just that locale file and work with it. The names of months, weeks and days are displayed in the locale specified. Customization MomentJS allows customization to the locale created. You can customize month names, month abbreviation, weekday names, weekday abbreviation, long date format, and calendar format for a defined locale as per your requirements. Utilities Utilities comes with two methods: normalize units and invalid. They are used with the moment and helps us change or customize the output as we need. It also allows to set our own custom validation on the moment object. Plugins Plugins are additional features of MomentJS. There are many plugins added to calendars, date format, parsing, date ranges, precise range etc. You can add your own plugins and make them available with Node.js and GitHub. MomentJS – Environment Setup In this chapter, you will learn in detail about setting up the working environment of MomentJS on your local computer. Before you begin with working on MomentJS, you need to have the access to the library. You can access its files in any of the following methods − Method 1: Using MomentJS File in Browser In this method, we are going to need MomentJS file from its official website and will use it directly in the browser. Step 1 As a first step, go to the official website of MomentJS https://momentjs.comYou will find the home page as shown here − Observe that there is a download option available which gives you the latest MomentJS file available. Note that the file is available with and without minification. Step 2 Now, include moment.js inside the script tag and start working with MomentJS. For this, you can use the code given below − <script type = “text/JavaScript” src = ” https://MomentJS.com/downloads/moment.js”></script> Given here is a working example and its output for a better understanding − Example Live Demo <html> <head> <title>MomentJS – Working Example</title> <script type = “text/JavaScript” src = “https://MomentJS.com/downloads/moment.js”></script> <style> div { border: solid 1px #ccc; padding:10px; font-family: “Segoe UI”,Arial,sans-serif; width: 50%; } </style> </head> <body> <div style = “font-size:25px” id = “todaysdate”></div> <script type = “text/JavaScript”> var a = moment().toString(); document.getElementById(“todaysdate”).innerHTML = a; </script> </body> </html> Output The moment-locale file to work with different locales is also available as shown in the screenshot above. Now, add the file to the script tag as shown below and work with different locales of your choice. For this, you can use the code given below − <script type=”text/JavaScript” src=”https://MomentJS.com/downloads/moment-with-locales.js”></script> Given here is a working example for moment-locale and its output for a better understanding − Live Demo <html> <head> <script type = “text/JavaScript” src =”https://MomentJS.com/downloads/moment-with-locales.js”></script> </head> <body> <h1>Moment Locale</h1> <div id = “datedisplay” style = “font-size:30px;”></div> <script type = “text/JavaScript”> var a = moment.locale(“fr”); var c = moment().format(“LLLL”); document.getElementById(“datedisplay”).innerHTML = c; </script> </body> </html> Output Method 2: Using Node.js If you are opting for this method, make sure you have Node.js and npm installed on your system. You can use the following command to install