Moment.js overview

MOMENT.JS
OVERVIEW
_by Oleksii Prohonnyi

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
 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
 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: 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
 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: 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: 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: 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_no
vembre_décembre".split("_"),
weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
meridiemParse: /PD|MD/,
isPM: function (input) {
return input.charAt(0) === 'M';
}
});

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
 Twitter
 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/

Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi

Moment.js overview

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Moment.js overview (16)

More from Oleksii Prohonnyi (11)

Recently uploaded (20)

Moment.js overview