Download - Moment.js overview
![Page 1: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/1.jpg)
MOMENT.JS OVERVIEW
_by Oleksii Prohonnyi
![Page 2: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/2.jpg)
IN A NUTSHELL
![Page 3: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/3.jpg)
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/
![Page 4: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/4.jpg)
INSTALLATION
![Page 5: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/5.jpg)
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/
![Page 6: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/6.jpg)
WHERE TO USE
![Page 7: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/7.jpg)
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/
![Page 8: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/8.jpg)
PARSING
![Page 9: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/9.jpg)
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/
![Page 10: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/10.jpg)
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)
![Page 11: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/11.jpg)
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])
![Page 12: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/12.jpg)
GET/SET
![Page 13: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/13.jpg)
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/
![Page 14: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/14.jpg)
MANIPULATION
![Page 15: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/15.jpg)
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/
![Page 16: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/16.jpg)
MANIPULATION: Operations
Add
Substract
Start of time
End of time
Local
UTC
UTC Offset
![Page 17: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/17.jpg)
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
![Page 18: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/18.jpg)
DISPLAY
![Page 19: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/19.jpg)
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/
![Page 20: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/20.jpg)
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
![Page 21: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/21.jpg)
I18N
![Page 22: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/22.jpg)
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/
![Page 23: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/23.jpg)
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';
}
});
![Page 24: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/24.jpg)
FEW MORE THINGS
![Page 25: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/25.jpg)
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/
![Page 26: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/26.jpg)
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/
![Page 27: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/27.jpg)
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/
![Page 28: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/28.jpg)
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/
![Page 29: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/29.jpg)
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/
![Page 30: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/30.jpg)
THANK YOU FOR ATTENTION
![Page 31: Moment.js overview](https://reader031.vdocuments.us/reader031/viewer/2022030218/588654c01a28ab26598b4c8d/html5/thumbnails/31.jpg)
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi