Formatting a Date String in React Native

Question

I m trying to format a Date String in React Native   Ex  2016-01-04 10 34 23  Following is the code I m using   var date   new Date  2016-01-04 10 34 23    console log date     My problem is  when I m emulating this on a iPhone 6S  it ll print Mon Jan 04 2016 10 34 23 GMT 0530  IST  without any problem  But if I try with the iPhone 5S it prints nothing  And if you try to get the month by using a method like date getMonth   it ll print  NaN    Why is this  What is the workaround

User · Answer

function getParsedDate date     date   String date  split         var days   String date 0   split  -      var hours   String date 1   split         return  parseInt days 0    parseInt days 1  -1  parseInt days 2    parseInt hours 0    parseInt hours 1    parseInt hours 2       var date   new Date    getParsedDate  2016-01-04 10 34 23     console log date        Because of the variances in parsing of date strings  it is recommended   to always manually parse strings as results are inconsistent    especially across different ECMAScript implementations where strings   like  2015-10-12 12 00 00  may be parsed to as NaN  UTC or local   timezone         as described in the resource    https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Date parse

User · Answer

Write below function to get date in string  convert and return in string format   getParsedDate strDate       var strSplitDate   String strDate  split           var date   new Date strSplitDate 0           alert date       var dd   date getDate        var mm   date getMonth     1    January is 0       var yyyy   date getFullYear        if  dd  lt  10            dd    0    dd            if  mm  lt  10            mm    0    mm            date    dd    -    mm    -    yyyy      return date toString        Print it where you required  Date    this getParsedDate stringDate

User · Answer

The Date constructor is very picky about what it allows  The string you pass in must be supported by Date parse    and if it is unsupported  it will return NaN  Different versions of JavaScript do support different formats  if those formats deviate from the official ISO documentation   See the examples here for what is supported  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Date parse

User · Answer

Easily accomplished using a package  Others have mentioned Moment  Moment is great but very large for a simple use like this  and unfortunately not modular so you have to import the whole package to use any of it  I recommend using date-fns  https   date-fns org    https   github com date-fns date-fns   It is light-weight and modular  so you can import only the functions that you need  In your case  Install it  npm install date-fns --save In your component  import   format   from  quot date-fns quot    var date   new Date  quot 2016-01-04 10 34 23 quot     var formattedDate   format date   quot MMMM do  yyyy H mma quot     console log formattedDate    Substitute the format string above  quot MMMM do  yyyy H mma quot  with whatever format you require  Update  v1 vs v2 format differences v1 used Y for year and D for day  while v2 uses y and d  Format strings above have been updated for v2  the equivalent for v1 would be  quot MMMM Do  YYYY H mma quot   source  https   blog date-fns org post unicode-tokens-in-date-fns-v2-sreatyki91jg    Thanks  Red

User · Answer

The beauty of the React Native is that it supports lots of JS libraries like Moment js   Using moment js would be a better easier way to handle date time instead coding from scratch  just run this in the terminal  yarn add moment also works if using React s built-in package manager    npm install moment --save   And in your React Native js page   import Moment from  moment    render        Moment locale  en        var dt    2016-05-02T00 00 00       return  lt View gt   Moment dt  format  d MMM     lt  View gt     basically you can do all sorts of the formatting and others     You may check the moment js official docs here https   momentjs com docs

User · Answer

There is no need to include a bulky library such as Moment js to fix such a simple issue   The issue you are facing is not with formatting  but with parsing   As John Shammas mentions in another answer  the Date constructor  and Date parse  are picky about the input  Your 2016-01-04 10 34 23 may work in one JavaScript implementation  but not necessarily in the other   According to the specification of ECMAScript 5 1  Date parse supports  a simplification of  ISO 8601  That s good news  because your date is already very ISO 8601-like   All you have to do is change the input format just a little  Swap the space for a T  2016-01-04T10 34 23  and optionally add a time zone  2016-01-04T10 34 23 01 00   otherwise UTC is assumed

[date] Formatting a Date String in React Native

Examples related to date

Examples related to react-native