为什么 toLocaleDateString 不能在 react-native (Android) 中工作？

Question

For some strange reasons, toLocaleDateString isn't working properly in react-native. Sometimes it works, sometimes it doesn't. For the following code,

const dateString = this.state.date.toLocaleDateString('en-US', {
            weekday: 'short',
            day: 'numeric',
            month: 'long',
            year: 'numeric',
        });

Sometimes I get just 07/17/2018 and sometimes regular output. Now I can implement it myself or use moment.js or something like that. I want to know why this is behaving like that.

Answer 1

React Native used JavaScriptCore engine in non-debug mode & it doesn't work well with dates, but work during debug because it use chrome V8 engine while debugging.

So it is better to use moment or XDate JavaScript library.

Answer 2

SDushan is right. It is better to use either Moment or XDate.

But I chose to write a small function instead of importing the whole library.

function getDateString(date) {
    if (Platform.OS === 'ios')
        return date.toLocaleDateString('en-US', {
            weekday: 'short',
            day: 'numeric',
            month: 'long',
            year: 'numeric',
        });
    else {

        var
            dayOfWeek = ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"],
            monthName = ["January", "February", "March", "April", "May", "June",
                         "July", "August", "September", "October", "November", "December"],
            utc = date.getTime() + date.getTimezoneOffset() * 60000,
            US_time = utc + (3600000 * -4),
            US_date = new Date(US_time);

        return dayOfWeek[US_date.getDay()-1] + ", " + monthName[US_date.getMonth()] +
               " " + US_date.getDate() + ", " + US_date.getFullYear();
    }
}

Answer 3

I used moment like SDushan said, here is an example:

import i18n from '../i18n';

const moment = require('moment');

moment.locale('es', {
  months : 'enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre'.split('_'),
  weekdays : 'domingo_lunes_martes_miercoles_jueves_viernes_sábado'.split('_'),
  relativeTime : {
      future : 'dentro de %s',
      past : 'hace %s',
      s : 'algunos segundos',
      m : 'un minuto',
      mm : '%d minutos',
      h : 'una hora',
      hh : '%d horas',
      d : 'un día',
      dd : '%d días',
      M : 'un mes',
      MM : '%d meses',
      y : 'un año',
      yy : '%d años'
  }
});

export const translateDate = date => {
    const currentLanguage = i18n.language;
    moment.locale(currentLanguage); // or moment.locale('es')
    const dateString = moment(date).format('dddd Do MMMM, YYYY');
    return dateString.charAt(0).toUpperCase() + dateString.slice(1)
}

Then you can use it in your component:

<View style={Styles().containerDate}>
     <Input
          inputContainerStyle={Styles().inputContainerStyle}
          inputStyle={Styles().inputText}
          editable={false}
          label={i18n.t(`${i18nConfinement}.startdate`)}
          placeholderTextColor={Styles().placeholder.color}
          value={translateDate(startDate)}
      />
      <Icon onPress={() => setShowStartDate(!showStartDate)} size={25} name={showStartDate ? 'calendar-check-o' : 'calendar'} color={Styles().icon.color} type='font-awesome' />
 </View>

Here is an article about how to manage dates using moment.js

Final result:

Answer 4

i used it to get dd.MM.yyyy HH:mm:ss format, worked well

 function addZero(i) { if (i < 10) { i = "0" + i; } return i; } const convertUTCToLocalTime = (dateString) => { let date = new Date(dateString); const milliseconds = Date.UTC( date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), ); const localTime = new Date(milliseconds); return localTime.getDate() + "." + localTime.getMonth() + "." + localTime.getFullYear() + " " + addZero(localTime.getHours()) + "." + addZero(localTime.getMinutes()) + "." + addZero(localTime.getSeconds()); };

Answer 5

I am currently on "react-native": "~0.63.3", and have the same issue when using toLocaleDateString. Here is what fixed it for me:

In my android/app/build.gradle file I replaced the following line

def jscFlavor = 'org.webkit:android-jsc:+' //remove this - it might be something else depending on your react-native version, try to look in your build.gradle file for similar comment I posted below in the picture

with

def jscFlavor = 'org.webkit:android-jsc-intl:+' // add this

The solution was found here: https://github.com/react-community/jsc-android-buildscripts#international-variant

and in my build.gradle file there is a comment from react-native, that describes that issue