Een datumreeks opmaken in React Native

Ik probeer een datumstring op te maken in React Native.

Vb: 2016-01-04 10:34:23

Hier volgt de code die ik gebruik.

var date = new Date("2016-01-04 10:34:23");
console.log(date);

Mijn probleem is dat wanneer ik dit emuleer op een iPhone 6S, het zonder enig probleem Mon Jan 04 2016 10:34:23 GMT+0530 (IST)afdrukt. Maar als ik het met de iPhone 5S probeer, wordt er niets afgedrukt. En als u de maand probeert te krijgen met een methode als date.getMonth(), wordt "NaN"afgedrukt.

Waarom is dit? Wat is de oplossing?

Antwoord 1, autoriteit 100%

Het mooie van React Native is dat het veel JS-bibliotheken zoals Moment.js ondersteunt.
Het gebruik van moment.js zou een betere/gemakkelijkere manier zijn om met datum/tijd om te gaan in plaats van helemaal opnieuw te coderen

voer dit gewoon uit in de terminal (yarn add momentwerkt ook als je de ingebouwde pakketbeheerder van React gebruikt):

npm install moment --save

En op je React Native js-pagina:

import Moment from 'moment';
render(){
    Moment.locale('en');
    var dt = '2016-05-02T00:00:00';
    return(<View> {Moment(dt).format('d MMM')} </View>) //basically you can do all sorts of the formatting and others
}

Je kunt de officiële documenten van moment.js hier bekijken
https://momentjs.com/docs/

Antwoord 2, autoriteit 26%

Eenvoudig te bereiken met een pakket.

Anderen hebben Moment genoemd. Moment is geweldig, maar erg groot voor een eenvoudig gebruik als dit, en helaas niet modulair, dus je moet het hele pakket importeren om er iets van te gebruiken.

Ik raad aan om date-fns (https://date-fns.org/) (https://github.com/date-fns/date-fns). Het is lichtgewicht en modulair, dus je kunt alleen de functies importeren die je nodig hebt.

In jouw geval:

Installeer het: npm install date-fns --save

In uw component:

import { format } from "date-fns";
var date = new Date("2016-01-04 10:34:23");
var formattedDate = format(date, "MMMM do, yyyy H:mma");
console.log(formattedDate);

Vervang de notatiereeks boven "MMMM Do, YYYY H:mma"door de gewenste notatie.

Update: v1 vs v2 formaat verschillen

v1 gebruikte yvoor jaar en dvoor dag, terwijl v2 yen dgebruikt. Opmaakstrings hierboven zijn bijgewerkt voor v2; het equivalent voor v1 zou zijn "MMMM Do, YYYY H:mma"(bron: https://blog.date-fns.org/post/unicode-tokens-in-date-fns-v2-sreatyki91jg/). Bedankt @Red

Antwoord 3, autoriteit 19%

Het is niet nodig om een ​​omvangrijke bibliotheek zoals Moment.js op te nemen om zo’n eenvoudig probleem op te lossen.

Het probleem waarmee u wordt geconfronteerd, is niet het formatteren, maar het ontleden.

Zoals John Shammas in een ander antwoord vermeldt, zijn de Date-constructor (en Date.parse) kieskeurig over de invoer. Uw 2016-01-04 10:34:23werkt mogelijk in de ene JavaScript-implementatie, maar niet noodzakelijk in de andere.

Volgens de specificatie van ECMAScript 5.1, Date.parseondersteunt (een vereenvoudiging van) ISO 8601. Dat is goed nieuws, want je date is al erg ISO 8601-achtig.

Het enige wat u hoeft te doen is het invoerformaat een klein beetje te wijzigen. Verwissel de spatie voor een T: 2016-01-04T10:34:23; en optioneel een tijdzone toevoegen (2016-01-04T10:34:23+01:00), anders wordt uitgegaan van UTC.

Antwoord 4, autoriteit 3%

Schrijf onderstaande functie om datum in tekenreeks te krijgen, te converteren en terug te geven in tekenreeksformaat.

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 < 10) {
        dd = '0' + dd;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    date =  dd + "-" + mm + "-" + yyyy;
    return date.toString();
}

Druk het af waar u maar wilt:
Datum: {this.getParsedDate(stringDate)}

Antwoord 5, autoriteit 2%

De Date-constructor is erg kieskeurig over wat hij toestaat. De tekenreeks die u doorgeeft, moet worden ondersteund door Date.parse(), en als deze niet wordt ondersteund, wordt NaN geretourneerd. Verschillende versies van JavaScript ondersteunen verschillende formaten, als die formaten afwijken van de officiële ISO-documentatie.

Bekijk hier de voorbeelden voor wat wordt ondersteund: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Antwoord 6

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);

Vanwege de variaties in het ontleden van datumstrings, wordt het aanbevolen
om strings altijd handmatig te ontleden omdat de resultaten inconsistent zijn,
vooral in verschillende ECMAScript-implementaties waar strings
zoals “2015-10-12 12:00:00” kan worden geparseerd als NaN, UTC of lokaal
tijdzone.

… zoals beschreven in de bron:

https://developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

Antwoord 7

Hier is mijn oplossing.

/**
 * Instantiates a date Date object, used because doing the following doesn't
 * work in React-Native but does work in the browser.
 * ```
 * // Replace this with
 * var date = new Date('2020-08-11 21:23:00')
 * // with
 * var date = safeNewDate('2020-08-11 21:23:00')
 * ```
 * @param {string} localDateTimeStr
 * @returns {Date}
 */
export const safeNewDate = function(localDateTimeStr) {
  var match = localDateTimeStr.match(
    /(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2}):(\d{2})(.(\d+))?/,
  )
  if (!match) throw new Error('Invalid format.')
  var [, year, month, date, hours, minutes, seconds, , millseconds] = match
  return new Date(
    year,
    Number(month) - 1,
    date,
    hours,
    minutes,
    seconds,
    millseconds || 0,
  )
}

Antwoord 8

Ik had hetzelfde probleem. Ik heb het volgende afgehandeld:

 const modifiedString = string => {
     const splitString = string.split('...');
     var newStr = '';
     for (var i = 0; i < splitString.length; i++) {
        if (splitString[i] !== '' && splitString[i] !== ' '){
        newStr = (
           <Text style={{ flexDirection: 'row', width: 200 }}>
              <Text>{newStr}</Text>
              <Text>{splitString[i]}</Text>
              <SuperFill data={res[i]} check={checkX} />
           </Text>
           );
        }
     }
   return newStr;
 };

Mijn SuperFillis een TextInput