Use Moment.js to Enhance Datetime Processing in Javascript
In any project, the handling of datetime is inevitable, especially some specific datetime projects such as booking, calendar, etc. require thorough application and knowledge enhancement. , how to calculate, parse, validate datetime that language provides. In javscript, moment.jsis a powerful library that supports these complex tasks.
Setting:
moment.js support on many browser environments, nodejs, and support many ways to install npm, bower, cdn, …
Here we will install on a javascript project using npm
npm install moment
I. Create moment object:
Now
There are many ways to create a moment object with the current date:
moment();
moment(undefined);
moment([]);
moment({});
moment(new Date());
Note: the
moment(null)moment object is invalid
Create moment object with specific datetime
Here we want to create a moment object with any specific datetime, there are the following ways:
1. String
Because datetime has many types of formats, the way to create the moment above may be inaccurate and not supported in some browsers if the string is invalid. So we should use the moment to create the moment with the string format parameter below
2. String + format
If we know the exact datetime format, we can use the string format to parse
moment("12-25-1995", "MM-DD-YYYY");
moment("2020-10-20 5:30:15", "YYYY-MM-DD HH:mm:ss");
3. Object
moment({ years:2020, months:10, date:20, hours:15, minutes:10, seconds:3, milliseconds:123});
Note: month has a value from 0 - 11
4. Date object
Create moment object with javascript Date object
const day = new Date(2020, 10, 16);
const dayWrapper = moment(day);
Note:
dayWrapperClone from theDateobject, the changes on these two objects are independent, do not affect each other
5. Array
moment([2020, 10, 14, 15, 25, 50, 125]); // Tạo moment object với parameters [year, month, day, hour, minute, second, millisecond]
6. Unix Timestamp
Similarly new Date(Number), we can create a moment object from the number of seconds / miliseconds from the Unix Epoch timeline (Jan 1 1970 12AM UTC)
moment(1318781876406); // Timestamp miliseconds
moment.unix(1318781876); // Timestamp seconds
7. UTC
UTC is a time with an international standard time zone of 0, which is independent of the locale’s time zone.
By default, a moment object will be parsed and displayed according to local time (for example, VN has a timezone of +7 + GMT + 0700). If we want parse and display moment in UTC then use that moment.utc()insteadmoment()
moment().format(); // 2020-04-04T10:35:24+07:00
moment.utc().format(); // 2020-04-04T18:35:24+00:00
II. Vaidation
We can check if a moment object has a valid datetime or not with the method moment().isValid()
III. Get and Set
1. Set
Change the moment object by setting the value in the corresponding units
moment().millisecond(Number);
moment().second(Number);
moment().minute(Number);
moment().hour(Number);
moment().date(Number); // date of month 1-31
moment().day(Number|String); // day of week Sunday as 0 and Saturday as 6
moment().month(Number|String); // from 0 to 11
moment().year(Number);
2. Get
Get the value in the corresponding units
moment().millisecond(); // Number
moment().second(); // Number
moment().minute(); // Number
moment().hour(); // Number
moment().date(); // Number
moment().day(); // Number
moment().month(); // Number
moment().year(); // Number
3. Find maximum date
Find the largest date using the method max
moment.max(Moment[]) // return max moment object
const a = moment().subtract(1, 'day');
const b = moment().add(1, 'day');
moment.max([a, b]); // b
4. Find minimum date
Find the smallest date using the method min
moment.min(Moment[]) // return min moment object
const a = moment().subtract(1, 'day');
const b = moment().add(1, 'day');
moment.min([a, b]); // a
IV: Manipulate moment object
After we create the moment object; We need to perform operations, calculations on the object just created with the following methods
1. Add
Change the moment object by adding more time or a period of time
moment().add(Number, String);
moment().add(Duration);
moment().add(Object);
moment().add(1, 'days'); // Add 1 day to the current time
moment().add (1, 'days'). add (1, 'months'); // Add 1 day and 1 month to the current time using the chaining method
moment().add ({days: 1, months: 1}); // Add 1 day and 1 month to the current time using the object parameter
2. Subtract
Change the moment object by subtracting time or a period of time
moment().subtract(Number, String);
moment().subtract(Duration);
moment().subtract(Object);
moment().subtract(1, 'days'); // Subtract 1 day from the current time
moment().subtract(1, 'days').subtract(1, 'months'); // Subtract 1 day and 1 month into current time using chaining method
moment().subtract({days: 1, months: 1}); // Subtract 1 day and 1 month from current time using object parameter
3. Start of Time
Change the moment object by setting it to the starting value of a unit of time (year, month, day, hour, hour, minute, second)
4. End of Time
End of time will be similar to Start of Time but with the end value of a time unit
Same for month, day, hour, minute, second
#javascript #momentjs
