Make date-handling in jQuery easy with moment.js.
When you start writing web applications, you will soon get to a point where you need to do date-handling, such as finding default start/end dates, converting seconds to hours and/or minutes, and all kinds of other date math.
Although JavaScript has all the necessary functionality within itself, it can be a little cumbersome if you (like me) have an RPG background and are used to the built-in opcodes in the RPG language. So for years I have been using jQuery plugins that encapsulate the complexity from the JavaScript Date() object. The plugin we’re going to talk about today offers some very easy and neat ways that you can do everyday date-handling, and to me it looks like something that I am familiar with from the RPG language. The name of the plugin is moment.js.
If you find the above appealing, please read on. I will provide you with some simple examples that will get you started and maybe give you an appetite for further “bites” of the plugin.
Setting It Up
In my examples, I will use Content Delivery Network (CDN) to load both jQuery and moment.js.
The “load” section of the HTML pages will look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Date operations</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="MCpressonline - jquery-date-handling-part1">
<meta name="author" content="Some person">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.min.js"></script>
This is also a very good template for pages. Of course, you can place the various plugins on your own server or you can use the CDN’s, whichever suits you the best.
Getting Your Dates
The most basic way to get the current date using moment.js is like this:
var currentDate = moment();
You will get something like this:
Wed Jul 31 2019 16:22:31 GMT+0200
To display the date/time in the format of your choice, moment.js offers you a wide range of options. The syntax is moment().format(String), where String can be a combination of letters that will display the date in the desired format.
In our first example, we set the current date and then format as an ISO date and an AM/PM date.
var wrkDate01 = moment().format('YYYY-MM-DD HH:mm:ss');
var wrkDate02 = moment().format('YYYY/DD/MM hh:mm:ss A');
$('#ex01_1').html( wrkDate01 + ' <p></p> ' + wrkDate02 );
The resulting two dates look like those below:
2019-07-31 20:40:03
2019/31/07 08:40:03 PM
To show a specific date, you can just pass the date to the moment() method. You can pass the date in various formats—for example, string, object, or UNIX timestamp.
In the next example, we use my birthday to parse to moment() as a string in ISO format. When we format it, we display it as day, month in text, and year. Also, we show the ISO week of the year plus the day of the year.
The code to do that looks like this.
var myDate = '2019-03-06';
var wrkDate01 = moment( myDate ).format('DD MMMM YYYY'); // Format date
var wrkDate02 = moment( myDate ).format('W'); // Get ISO week
var wrkDate03 = moment( myDate ).format('DDD'); // Get day of year
$('#ex01_2').html( wrkDate01 + ' / week: ' + wrkDate02 + ' / day of year: ' + wrkDate03 );
The result will look like this:
06 March 2019 / week: 10 / day of year: 65
If you want to show the current date as month name, day of month, day of week, year, time, etc., moment.js lets you do that in an easy way.
And if you want to see this in, for example, the Danish language, you can set a moment.locale as shown below:
var wrkDate = moment().format('LLLL');
moment.locale('da');
var wrkDate_locale = moment().format('LLLL');
$('#ex01_3').html( wrkDate + '<p></p>' + wrkDate_locale );
The result will look like this:
Wednesday, July 31, 2019 9:13 PM
onsdag d. 31. juli 2019 kl. 21:13
Moment.js supports well over 100 languages—everything from Afrikaans to Yoruba Nigeria—including eight versions of English and even Klingon.
If you want to find start/end of for example week, month, or likewise, moment.js has this built into it also with a method named startOf, where the syntax is like this:
moment().startOf(String);
So in our next example, we set the current date of today and then we use startOf() to get the ISO start/end of week and the start/end of the month according to the current date. Here’s the code:
var wrkDate00 = moment().format('YYYY-MM-DD');
var wrkDate01 = moment( wrkDate00 ).startOf('isoWeek').format('YYYY-MM-DD');
var wrkDate02 = moment( wrkDate00 ).endOf('isoWeek').format('YYYY-MM-DD');
var wrkDate03 = moment( wrkDate00 ).startOf('month').format('YYYY-MM-DD');
var wrkDate04 = moment( wrkDate00 ).endOf('month').format('YYYY-MM-DD');
$('#ex01_4').html( 'Root date: ' + wrkDate00
+ '<p></p>'
+ 'Start of week (ISO): ' + wrkDate01
+ '<br>'
+ 'End of week (ISO): ' + wrkDate02
+ '<p></p>'
+ 'Start of month : ' + wrkDate03
+ '<br>'
+ 'End of month : ' + wrkDate04
);
The results will look like this:
Root date: 2019-07-31
Start of week (ISO): 2019-07-29
End of week (ISO): 2019-08-04
Start of month: 2019-07-01
End of month: 2019-07-31
Helpful Links
moment.js parse: https://momentjs.com/docs/#/parsing/
moment.js display: https://momentjs.com/docs/#/displaying/
What a Nice Date, Let’s Do It Again
I hope you can see the use of moment.js. Remember, this is just the first tip in a series of two.
Next time, we will look into getting/setting and computing on dates using moment.js.
I am already looking forward to our next date.
Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.
IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn:
LATEST COMMENTS
MC Press Online