How to format ISO date in React-Native - javascript

I am getting date data in this format from my API:
"2018-12-26T05:00:29"
however I need to display this in the application front end in a different format like this:
"Monday, Nov 26 at 10:00 am"
How can I achieve this in react-native?

Consider using a third-party library like momentjs for advanced date parsing and formatting. Using moment, you can format the date string as required via the following pattern:
// dddd for full week day, MMM for abreviated month, DD for date, etc
moment(inputDate).format("dddd, MMM DD at HH:mm a")
The momentjs library works well with react-native and can be easily installed by:
npm install moment --save
and imported into your project:
import moment from 'moment';
Here's a snippet demonstrating the pattern shown above:
var inputDate = "2018-12-26T05:00:29";
var outputDate = moment(inputDate).format("dddd, MMM DD at HH:mm a");
console.log(outputDate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

While Moment.js can resolve this issue quickly, it's however a pretty big library to use for a single use case. I recommend using date-fns instead. It's lite.
I come out of this thanks to https://github.com/date-fns/date-fns/issues/376#issuecomment-353871093.
Despite the solution, I did some perfection on Date Field Symbol. You may need to use dd instead of DD / yyyy instead of YYYY for formatting days of the month / for formatting years.
Read the doc here: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md

Related

JavaScript - Create date with format string

In JavaScript would it be possible to create a date using a format string?
Example:
new Date('10/12/2020', 'dd/mm/yyyy');
new Date('12/10/2020', 'mm/dd/yyyy');
new Date('2020/01/20', 'yyyy/mm/dd');
new Date('2020-01-20', 'yyyy-mm-dd');
new Date('2020 01 20', 'yyyy mm dd');
All of those would create a new valid date.
Javascript does not support creating date with string format. You can use any of the following libraries for formatting,
moment.js (https://momentjs.com/)
Luxon(https://moment.github.io/luxon/)
date-fns (https://date-fns.org/)
Day.js (https://day.js.org/)
Example for moment.js :
moment().format('MMMM Do YYYY, h:mm:ss a');
moment(Your date).format('MM/DD/YYYY');
Trying to parse a string using the Date constructor shouldn't be done. This can give you unpredictable results in different browser platforms.
The best is to use a popular date library like moment.js.
It is as easy as this.
moment(str, 'YYYY-MM-DD')
Here is the phrasing guide:
https://momentjs.com/guides/#/parsing/

dayjs() telling me invalid date for this date string

DayJs
Using it on the browser if that matters (firefox + Vue + typescript).
This is my date string
2021-02-05 12:00 AM
It fusses about the AM/PM in my code:
const dateObj: any = dayjs('2021-02-05 12:00 AM').format('YYYY-MM-DD hh:mm A');
The output of dateObj is always "Invalid Date". If I remove the "AM" from the string it parses correctly. If I try this online tester for the same code, the output is
NaN-NaN-NaN NaN:NaN PM
Like with my dev environment, if I remove the AM, it's fine.
Any ideas?
EDIT: Working on Chrome and not Firefox...
Issue on Firefox
If you deeply look at the implementation, you would see above day string going through the Day constructor: new Day('2021-02-05 12:00 AM'). Unfortunately FF doesn't support this support this day string format, but Chrome does.
Best approach
The dayjs documentation mentions:
For consistent results parsing anything other than ISO 8601 strings, you should use String + Format.
If you're still keen to use above format, you would have to use a plugin as mentioned here
Basically, you have to change as below to work in all browsers:
import customParseFormat from 'dayjs/plugin/customParseFormat'
import dayjs from "dayjs"
dayjs.extend(customParseFormat)
const yourDate = dayjs('2021-02-05 12:00 AM', 'YYYY-MM-DD HH:mm A')

How to convert "12/20/2018 1:30 AM" format to the YY-MM-DD hh:mm:ss in angular js?

I have to store the date in the database using this format YY-MM-DD hh:mm:ss but I get this 12/20/2018 1:30 AM after select date from the kendo-datetime picker.
I have tried fomat="YY-MM-SS hh:mm:ss" but its not working every time getting above the same format.
Tell me, anyone, how to convert selected date and time to YY-MM-DD hh:mm:ss?
var date = object.dTime;
var newdate = date.split("/").reverse().join("-");
Use moment library in order to format the date into whatever way that you want to display,
moment(date).format('YY-MM-SS hh:mm:ss')
For more detail, look at here
You can use in angular moment js please read moment js implementation.
or you can follow this link both question are something same .
[format date with moment.js
In your html file use this
<input kendo-date-picker
k-format="'dd/MM/yyyy'"
ng-model="model.Date"
name="Date" required />
var date = new Date('12/20/2018 1:30 AM')
date.toISOString().replace('T', ' ').substring(2, 11) + date.toTimeString().substring(0, 8) // "18-12-19 01:30:00"

MomentJS: how to parse dates in MM/DD/YYYY & DD/MM/YYYY

How can i use moment.js in both: Australia & USA time formats?
For example:
07/08/2017 - is good for both time formats, but!
30/08/2017 - is invalid for moment.js, but i can have such dateTime
You can check it here:
http://jsfiddle.net/rLjQx/2135/
The parser is assuming that digits of the form XX-XX-XXXX are representing DD-MM-YYYY. If you'd like it to accept MM-DD-YYYY then you need to specify this.
eg var now2 = moment('08/30/2017', 'MM-DD-YYYY').format('MMM DD h:mm A');
You can also specify an array of different formats that you'd like it to accept so that it will recognise both:
var now2 = moment('08/30/2017', ['DD-MM-YYYY', 'MM-DD-YYYY']).format('MMM DD h:mm A');
Specify the format via a second parameter to the moment call
var now2 = moment('30/08/2017', 'DD/MM/YYYY').format('MMM DD h:mm A');
Otherwise there is no way for moment to know
Related docs here: https://momentjs.com/docs/#/parsing/string-format/
Corrected fiddle: http://jsfiddle.net/wu6wwsvp/
In your fiddle you are using a very old version of moment (2.2.1), I suggest to upgrade it to lastest one (2.18.1).
Using a newer version, you will have a Deprecation Warning in your console:
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Following the link (and moment(String) docs) you will discover that you have to specify format to parse you string correctly.
As Billy Reilly suggested you can use moment(String, String[]) parsing function. Please remeber that:
Starting in version 2.3.0, Moment uses some simple heuristics to determine which format to use. In order:
Prefer formats resulting in valid dates over invalid ones.
Prefer formats that parse more of the string than less and use more of the format than less, i.e. prefer stricter parsing.
Prefer formats earlier in the array than later.
So the way 07/08/2017 will be interpreted depends on the order of the format in array of formats parameter.
Here a snippet with some examples:
var now = moment('30/08/2017', ['MM/DD/YYYY','DD/MM/YYYY']);
var now2 = moment('08/30/2017', ['MM/DD/YYYY','DD/MM/YYYY']);
var now3 = moment('07/08/2017', ['MM/DD/YYYY','DD/MM/YYYY']);
console.log(now.format('MMM DD h:mm A')); // Aug 30 12:00 AM
console.log(now2.format('MMM DD h:mm A'));// Aug 30 12:00 AM
console.log(now3.format('MMM DD h:mm A'));// Jul 08 12:00 AM
var now4 = moment('30/08/2017', ['DD/MM/YYYY','MM/DD/YYYY']);
var now5 = moment('08/30/2017', ['DD/MM/YYYY','MM/DD/YYYY']);
var now6 = moment('07/08/2017', ['DD/MM/YYYY','MM/DD/YYYY']);
console.log(now4.format('MMM DD h:mm A')); // Aug 30 12:00 AM
console.log(now5.format('MMM DD h:mm A')); // Aug 30 12:00 AM
console.log(now6.format('MMM DD h:mm A')); // Aug 07 12:00 AM
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

How to convert date format in JavaScript?

In my Rails application, in JSON responses from controller, dates are coming as 2015-06-22T18:08:22+05:30. I want to convert the date into 22-06-2015, 06:08 PM format in Javascript. I checked may resources in Stackoverflow but none is working. Is there any way to do that?
you can use date.format library
Here's a example fiddle
var date = new Date("2015-06-22T18:08:22+05:30");
var dateString = date.format("dd-mm-yyyy hh:MM:ss TT Z");
alert(dateString);
Also it would be better to format it on server side if you dont want to include extra libraries
moment is a very good library for dealing with date.
console.log(moment('2015-06-22T18:08:22+05:30').format('DD-MM-YYYY h:mm:ss a'));
> 22-06-2015 7:38:22 pm
There are Two Ways:
Do the conversion in the Rails and send the value via JSON (using strftime or u can use Date.strptime or Time.strptime)
Code:
User.created_at.strftime("%d/%m/%Y")
Doing the conversion in Front End using Moment Js:
Code:
console.log(moment('2015-06-22T18:08:22+05:30').format('DD-MM-YYYY h:mm:ss a'));

Categories