Better way to reformat a complex textual date string in Javascript

Question

My CMS doesn't allow me to reformat a date string on the back end, so I'm converting the text on the front end with Javascript.

This are some examples of what the CMS produces:

Sunday, November 11, 2012, 4:45 PM - 6:00 PM
Every Sunday , 9:15 AM - 10:30 AM
First Sunday of the month, 9:15 AM - 1:00 PM - Rm 306
Every Wednesday, 5:30 PM - 8:30 PM, from 09/05/2012 to 11/14/2012

Here's how I want it to be formatted:

Sun, Nov 11 @ 4:45-6p (Short day & month name, no year, no trailing :00)
Every Sun @ 9:15-10:30a (no AM/PM indicator on the first time if they're both AM or PM)
First Sun of the month @ 9:15a-1p (Lowercase A & P)
Every Wed @ 5:30-8:30p, Sep 5-Nov 14 (Show months on date span, remove year, remove leading 0 on dates)

So here's the function I've come up with:

$(".smart-time").each(function(){ $(this).html($(this).html() .replace(/( *)?-( *)?([0-9]([0-2])?:[0-5][0-9])/gi,"-$3") // Remove space in dashes between time .replace(/(:[0-5][0-9])([ ]?AM)/gi,"$1a") // Short AM .replace(/(:[0-5][0-9])([ ]?PM)/gi,"$1p") // Short PM .replace(/12:00( )?p/gi,"Noon") // 12:00p = Noon .replace(/12:00( )?a/gi,"Midnight") // 12:00a = Midnight .replace(/(:00| from)/gi,"") // No trailing :00 .replace(/([0-9:]*)a-([0-9:]*)a/gi,"$1-$2a") // Remove first 'a' in span .replace(/([0-9:]*)p-([0-9:]*)p/gi,"$1-$2p") // Remove first 'p' in span .replace(/(\, |\/)(20[0-9][0-9])/gi,"") // Remove Year .replace(/ to /gi,"-") // to changed to - .replace(/\/(0)?([0-9]*)/gi,"/$2") // Remove leading 0 in dates .replace(/01\//gi,"Jan ") // Change month number to short name .replace(/02\//gi,"Feb ") .replace(/03\//gi,"Mar ") .replace(/04\//gi,"Apr ") .replace(/05\//gi,"May ") .replace(/06\//gi,"Jun ") .replace(/07\//gi,"Jul ") .replace(/08\//gi,"Aug ") .replace(/09\//gi,"Sep ") .replace(/10\//gi,"Oct ") .replace(/11\//gi,"Nov ") .replace(/12\//gi,"Dec ") .replace(/(Sun|Mon|Tue|Wed|Thu|Fri|Sat)(s|nes|rs|ur)?day/gi,"$1") // Shorten Day names .replace(/\, <\/span>/gi," @ </span>") // Change , to @ .replace(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)((r)?uary|(t)?(em)?(o)?ber|ch|il|e|y|ust)?/gi,"$1") // Shorten Month names ); });

This works, but it feels very... bulky.

Is there a better way to do this or a simpler way to accomplish the same goal?

Here's a JSFiddle showing what the script does better: jsfiddle.net/ES4aC/1 — shshaw
– shshaw, Commented Sep 10, 2012 at 21:10
Indeed, human language is bulky, so bulky code is required :D — Claudi
– Claudi, Commented Sep 10, 2012 at 21:12
You might want to use a library that already does most of this like date.js — epascarello
– epascarello, Commented Sep 10, 2012 at 21:21
@epascarello May be worth using a library, however since I only need it to convert these specific dates it seems wasteful (bandwidth & resource wise) to pull in a whole library for that. — shshaw
– shshaw, Commented Sep 10, 2012 at 21:27

Kelvin · Accepted Answer · 2012-09-10 21:23:57Z

1

Another option worth considering is the jQuery UI Datepicker's parseDate() method, documented here.

However, while this is very easy to use, it's clearly only practical if you're already using datepicker on your site.

answered Sep 10, 2012 at 21:23

Kelvin

5,3171 gold badge27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shshaw Over a year ago

I have jQuery, but not jQuery UI. Not sure if pulling that in just for this would be worthwhile.

Kelvin Over a year ago

Yep, it almost definitely wouldn't be worth it. The library can be quite heavy in its current incarnation.

asawyer · Accepted Answer · 2012-09-10 21:20:20Z

If you are not opposed to bringing in libraries, I'd take a look at DateJs

It has a number of very nice date formatting features.

From the getting started page:

// Lets start simple. "Today" Date.parse('today'); // How about tomorrow? Date.parse('tomorrow'); // July 8? Date.parse('July 8'); // With a year? Date.parse('July 8th, 2007'); // And time? Date.parse('July 8th, 2007, 10:30 PM'); // Get the date, move to Monday (if not already Monday), // then alert the date to the user in a different format. var d1 = Date.parse('8-Jul-2007'); if (!d1.is().monday()) { d1.last().monday(); } alert(d1.toString('dddd, MMMM d, yyyy'));

weexpectedTHIS · Accepted Answer · 2012-09-10 21:12:22Z

You should look in to Date.parseDate. Here's a good example article: http://www.xaprb.com/articles/javascript-date-parsing-demo.html

Collectives™ on Stack Overflow

Better way to reformat a complex textual date string in Javascript

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related