Parse date with moment.js with locales

Question

I am getting an "Invalid date" error when I translate my dates from Spanish to English with moment.js (with locales). The weird thing here, is that only fails with some dates.

I have a list of dates, apparently of the same format (they were parsed before using the same library). Then when I parsed it again after change the moment.js locale (To translate my dates to the desired language) I get this:

Enero 13º 2017, 6:00:02 Am --> Invalid date
Abril 17º 2017, 7:36:03 Pm --> Invalid date
Abril 17º 2017, 6:00:01 Am --> Invalid date
Mayo 12º 2017, 2:04:19 Pm   --> May 12th 2017, 2:04:19 Pm
Abril 17º 2017, 11:47:17 Pm --> Invalid date

Parse Method (format is initialized here because in other moments it can get other values):

format = 'MMMM Do YYYY, h:mm:ss a';
$(".videoDate").each(function(){
    var _text = $(this).text();//Extract initial date
    var _date = moment(_text, format).format('MMMM Do YYYY, h:mm:ss a');//format
    $(this).text(_date);//new date setting
});

http://jsfiddle.net/gr1zdtag/

Maybe I am missing something but I don't find the reason yet. Can any help me with this problem?

Solution

You can specify locale when parsing non-english input. You can use moment(String, String, String):

As of version 2.0.0, a locale key can be passed as the third parameter to moment() and moment.utc().

You can use locale() function to change locale of a given moment object (while moment.locale() changes locale globally).

Here a working sample:

var format = 'MMMM Do YYYY, h:mm:ss a';
$(".videoDate").each(function(){
    var _text = $(this).text();//Extract initial date
    //Parse in spanish and convert it in english
    var _date = moment(_text, format, 'es')
                  .locale('en')
                  .format('MMMM Do YYYY, h:mm:ss a');//format
    $(this).text(_date);//new date setting
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.3/moment-with-locales.min.js"></script>

<ul>
  <li class="videoDate">Enero 13º 2017, 6:00:02 Am</li>
  <li class="videoDate">Abril 17º 2017, 7:36:03 Pm</li>
  <li class="videoDate">Abril 17º 2017, 6:00:01 Am</li>
  <li class="videoDate">Mayo 12º 2017, 2:04:19 Pm</li>
  <li class="videoDate">Abril 17º 2017, 11:47:1</li>
</ul>

---

Mayo 12º 2017, 2:04:19 Pm is recognized beacuse by default moment parses strings using english locale and Moment's parser is very forgiving. Mayo contains May so it is considered a valid month name (using forgiving mode).

Comments

[Daniil Grankin]

I provided jsfiddle looks like some months are parsed incorrectly. Not sure why on first glance github.com/moment/moment/blob/develop/locale/es.js looks fine.

[Genaut]

Yeah, It's working with third parameter. Anyway, When I call the JS function, the caller function makes a "moment.locale("en") before, this should work on the same way but looks like the moment locale wasn't used in the format function. Thanks a lot for the help @VincenzoC

[VincenzoC]

@Genaut do you want to display the dates in english? (Something like translating spanish dates to english)

[VincenzoC]

Great! I've updated my answer using locale() to make the function display dates in english.