In moment
, I can use below code to format date strings which may have different format styles.
let test=['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022']
test.forEach((value)=>{
const dateFormats = ['MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD', 'YYYY-DD-MM'];
console.log( moment(value, dateFormats).format('MM-DD-YYYY'));
});
All date string could be parsed correctly.
When replace moment
with date-fns
, I didn't find a good way. parse
only accept one date format string.
Here is my workaround:
test(){
let test=['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022']
test.forEach((value)=>{
const formatStyle = this.GetDateFormat(value);
if(!formatStyle) {
return 'Invalid Date';
}
const temp = parse(value, formatStyle, new Date());
console.log(format(temp, 'MM-dd-yyyy'));
});
}
dateFormatArray = ['MM-dd-yyyy', 'MM/dd/yyyy', 'MM.dd.yyyy',
'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yyyy',
'yyyy-MM-dd', 'yyyy/MM/dd', 'yyyy.MM.dd',
'yyyy-dd-MM', 'yyyy/dd/MM','yyyy.dd.MM']
GetDateFormat(date:string):string{
let format ='invalid';
this.dateFormatArray.forEach((dateFormat) => {
if(isMatch(date, dateFormat)){
format = dateFormat;
}
});
return format;
}
Is there other better way to parse the date strings which contains different format styles in date-fns
?
you can try it with an different library date-fns-tz
to use date strings like this... or you can use dateRegexes
to achieve same in date-fns
import { zonedTimeToUtc } from 'date-fns-tz';
const test=['2022-04-29', '04-29-2022','29-04-2022', '4/29/2022', '29/4/2022'];
test.forEach((value) => {
const dateFormats = ['MM-DD-YYYY', 'DD-MM-YYYY', 'YYYY-MM-DD', 'YYYY-DD-MM'];
const date = dateFormats.reduce((acc, format) => acc || zonedTimeToUtc(value, format), null);
if (date) {
console.log(format(date, 'MM-dd-yyyy'));
} else {
console.log('Invalid Date');
}
});
Hope This Helps...