Search code examples
javascriptmomentjsdate-fns

Date-fns how to parse date string with multiple formats?


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. parseonly 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?


Solution

  • 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...