moment.js overview
TRANSCRIPT
MOMENT.JS OVERVIEW
_by Oleksii Prohonnyi
IN A NUTSHELL
IN A NUTSHELL
Parse, validate, manipulate, and display dates in JavaScript.
Version: 2.13.0
Download: http://momentjs.com/downloads/moment.js
See more: http://momentjs.com/docs/
INSTALLATION
INSTALLATION
bower install moment --save # bower
npm install moment --save # npm
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
See more: http://momentjs.com/docs/
WHERE TO USE
WHERE TO USE
Moment was designed to work both in the browser and in Node.js.
All code should work in both of these environments, and all unit tests are run in both of these environments.
Currently the following browsers are used for the ci system:
Chrome on Windows XP,
IE 8, 9, and 10 on Windows 7,
IE 11 on Windows 10,
latest Firefox on Linux,
and latest Safari on OSX 10.8 and 10.11.
See more: http://momentjs.com/docs/#/use-it/
PARSING
PARSING: General
Instead of modifying the native Date.prototype, Moment.js creates a wrapper for the Date object. To get this wrapper object, simply call moment() with one of the supported input types.
The Moment prototype is exposed through moment.fn. If you want to add your own functions, that is where you would put them.
See more: http://momentjs.com/docs/#/parsing/
PARSING: Input types (1)
ISO 8601 format String:
moment("1995-12-25")
String + Format:
moment("12-25-1995", "MM-DD-YYYY")
String + Formats:
moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"])
Special Formats:
moment("2010-01-01T05:06:07", moment.ISO_8601)
PARSING: Input types (2)
Object:
moment({hour:15, minute:10})
Unix Timestamp:
moment(1318781876406) #milliseconds
moment.unix(1318781876) #seconds
Date:
moment(new Date(2011, 9, 16))
Array:
moment([2010, 6, 10])
GET/SET
GET/SET
Moment.js uses overloaded getters and setters. You may be familiar with this pattern from its use in jQuery.
Calling these methods without parameters acts as a getter, and calling them with a parameter acts as a setter
moment().milliseconds(1464949616694)
moment().milliseconds()
See more: http://momentjs.com/docs/#/get-set/
MANIPULATION
MANIPULATION: General
Once you have a Moment, you may want to manipulate it in some way.
Moment.js uses the fluent interface pattern, also known as method chaining.
moment().add(7, 'days')
.subtract(1, 'months')
.year(2009)
.hours(0)
.minutes(0)
.seconds(0);
See more: http://momentjs.com/docs/#/manipulating/
MANIPULATION: Operations
Add
Substract
Start of time
End of time
Local
UTC
UTC Offset
MANIPULATION: Example
var d = moment([2010, 0, 31]); // Jan 31, 2010
d.add(1, 'months'); // Feb 28, 2010
d.startOf('year'); // Jan 1, 2010 12:00
d.utcOffset(); // -240
DISPLAY
DISPLAY: Formatting
Format
Time from now
Time from X
Time to now
Time to X
Calendar Time
Difference
Unix Timestamp (milliseconds)
Unix Timestamp (seconds)
Days in Month
As Javascript Date
As Array
As JSON
As ISO 8601 String
As Object
As String
See more: http://momentjs.com/docs/#/displaying/
DISPLAY: Example
var d = moment([2007, 01, 29]);
d.fromNow(); // “9 years ago"
d.from([2007, 01, 30]); // "a day ago"
moment([2007, 0, 29]).toNow(); // in 9 years
I18N
I18N: General
Moment.js has robust support for internationalization.
You can load multiple locales and easily switch between them.
In addition to assigning a global locale, you can assign a locale to a specific moment.
moment.locale('fr');
moment(1316116057189).fromNow() // "il y a une heure"
moment.locale('en');
moment(1316116057189).fromNow() // "an hour ago"
See more: http://momentjs.com/docs/#/i18n/
I18N: Locale definition
By default, Moment.js comes with English locale strings. If you need other locales, you can load them into Moment.js for later use.
More details on each of the parts of the locale bundle can be found in the customization section.
moment.locale('fr', {
months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
meridiemParse: /PD|MD/,
isPM: function (input) {
return input.charAt(0) === 'M';
}
});
FEW MORE THINGS
UTC
By default, moment parses and displays in local time.
If you want to parse or display a moment in UTC, you can use moment.utc() instead of moment().
moment.utc([2011, 0, 1, 8])
moment([2011, 0, 1, 8])
See more: http://momentjs.com/docs/#/parsing/utc/
CREATION DATA
After a moment object is created, all of the inputs can be accessed with creationData() method:
moment("13-01-02", "YY-MM-DD", true).creationData() === {
input: "13-01-02",
format: "YY-MM-DD",
locale: Locale obj,
isUTC: false,
strict: true
}
See more: http://momentjs.com/docs/#/parsing/creation-data/
QUERIES
Is Before
Is Same
Is After
Is Same or Before
Is Same or After
Is Between
Is Daylight Saving Time
Is DST Shifted
Is Leap Year
Is a Moment
Is a Date
See more: http://momentjs.com/docs/#/query/
CUSTOMIZATION
Moment.js is very easy to customize. In general, you should create a locale setting with your customizations.
moment.locale('en-my-settings', {
// customizations.
});
See more: http://momentjs.com/docs/#/customization/
PLUGINS
Strftime
ISO Calendar
Date Ranges
Twix
Jalaali Calendar
MSDate
Fiscal Quarters
Precise Range
Recur
Parse Date Format
Java DateFormat Parser
Hijri Calendar
Round
Transform
Taiwan Calendar
See more: http://momentjs.com/docs/#/plugins/
THANK YOU FOR ATTENTION
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi