![MomentJS Tutorial](/momentjs/images/momentjs-mini-logo.jpg)
- MomentJS Tutorial
- MomentJS - Home
- MomentJS - Overview
- MomentJS - Environment Setup
- MomentJS - Introduction
- MomentJS - Parsing Date And Time
- MomentJS - Date Validation
- MomentJS - Getter/Setter
- Manipulate Date And Time
- Formatting Date And Time
- MomentJS - Date Queries
- MomentJS - Internationalization
- MomentJS - Customization
- MomentJS - Durations
- MomentJS - Utilities
- MomentJS - Plugins
- MomentJS - Examples
- MomentJS Useful Resources
- MomentJS - Quick Guide
- MomentJS - Useful Resources
- MomentJS - Discussion
MomentJS - Introduction
In this chapter, we will discuss how to work with MomentJS using RequireJS and MomentJS and TypeScript.
MomentJS and RequireJS
To understand the working of MomentJS using RequireJS, let us analyze a working example with MomentJS and RequireJS. The folder structure of the corresponding app is shown in the following image −
![MomentJS and RequireJS](/momentjs/images/momentjs_and_requirejs.jpg)
You can obtain the require.js file fetched from RequireJS official site − https://requirejs.org/docs/download.html. Observe the following code for a better understanding −
Example project.html
<!DOCTYPE html> <html> <head> <title>RequireJS and MomentJS</title> <!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. --> <script data-main="scripts/main" src="scripts/require.js"></script> </head> <body> <h1>RequireJS and MomentJS</h1> <div id="datedisplay" style="font-size:25px;"></div> </body> </html>
main.js
require.config({ paths:{ 'momentlocale':'libs/momentlocale', }, }); require(['momentlocale'], function (moment) { moment.locale('fr'); var a = moment().format("LLLL"); document.getElementById("datedisplay").innerHTML = a; });
Note that Moment.js and momentlocale.js are in the folder libs.
The following is the output for project.html that you will observe in the browser −
![Requiredjs and MomentJS](/momentjs/images/requiredjs_and_momentjs.jpg)
MomentJS and TypeScript
The code used for building MomentJS and Typescript project are as given below −
package.json
{ "name": "momenttypescript", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "browserify": "^16.2.0", "gulp": "^3.9.1", "gulp-connect": "^5.5.0", "gulp-typescript": "^4.0.2", "moment": "^2.22.1", "tsify": "^4.0.0", "typescript": "^2.8.3", "vinyl-source-stream": "^2.0.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Note that the dependencies available in package,json needs to be installed using npm install.
main.ts
import * as moment from 'moment'; let now = moment().format('LLLL'); document.getElementById("datedisplay").innerHTML = now;
You need to use Gulp to build the file from typescript to JavaScript, that is from main.ts to main.js. The following code shows the gulpfile.js which is used to build the file. Note that we have used gulp-connect package which opens a local server to display the output.
gulpfile.js
var gulp = require("gulp"); var connect = require("gulp-connect"); var browserify = require("browserify"); var tsify = require("tsify"); var source = require("vinyl-source-stream"); gulp.task("build", function (cb) { runSequence("browserify", "minify", cb); }); gulp.task("startserver", ["browserify", "connect"]); gulp.task("browserify", function () { var b = browserify({ insertGlobals: true, debug: false }) .add("src/main.ts") .plugin(tsify, { typescript: require("typescript") }); return b .bundle() .pipe(source("main.js")) .pipe(gulp.dest("build/")); }); gulp.task("connect", function () { connect.server({ root: ".", // port: '80', livereload: true }); });
This is the output that you observe when you run the code given above −
![MomentJS and Typescript](/momentjs/images/momentjs_and_typescript.jpg)
You can see the folder structure as shown in the following format −
![Folder Structure](/momentjs/images/folder_structure.jpg)
The code for index.html is shown below −
<html> <head></head> <body> <h1>MomentJS and typescript</h1> <div id="datedisplay" style="font-size:30px;"></div> <script src="build/main.js"></script> </body> </html>
Now, if you open http://localhost:8080/, you can see the output as shown below −
![Localhost](/momentjs/images/localhost.jpg)
To Continue Learning Please Login