DateTimePicker not parsing lower case am/pm

[Bill Naples]

Repro steps:

1) Go to DateTimePicker demo: https://ej2.syncfusion.com/aspnetcore/DateTimePicker/Format#/material

2) Type in time "10:00 pm", i.e., lower case 'pm'

Expected result: Time set to 10:00 pm, or 10:00 PM

Actual result: Time set to 10:00 am

More information:

It seems that the component expects upper case AM/PM, and anything else gets reset to AM automatically.

Workaround:

In the parent Vue component, set ref="picker" on ejs-datetimepicker component, and add the following code:

```javascript

methods: {

// The SyncFusion TimePicker component doesn't parse lowercase am/pm, so we need to do that ourselves.

cleanInput (event) {

const target = event.target

const value = target.value.replace('am', 'AM').replace('pm', 'PM')

if (target.value !== value) target.value = value

}

},

mounted () {

const el = this.$refs.picker.$el

if (el) el.addEventListener('input', this.cleanInput)

},

beforeDestroy () {

const el = this.$refs.picker.$el

if (el) el.removeEventListener('input', this.cleanInput)

}

```

[Bill Naples]

A second issue is that the picker won't parse a 24 hour time when displaying 12 hour format. For example, if the time picker is formatted in 12 hour time format, then if the user decides to type in "16:30", it's not able to parse it. It would be nice for the picker to just convert it to "04:30 PM". There's no ambiguity that's what the user means to do.

The javascript Date object can already parse all these formats. Here is Chrome console repl. It would be nice for the picker component to have flexible parsing like that as well, or just hand it off to the Date constructor to do it for you! :)

```

new Date("03/21/2021 16:30")                                         

Sun Mar 21 2021 16:30:00 GMT-0400 (Eastern Daylight Time)

new Date("03/21/2021 04:30 AM")

Sun Mar 21 2021 04:30:00 GMT-0400 (Eastern Daylight Time)

new Date("03/21/2021 04:30 PM")

Sun Mar 21 2021 16:30:00 GMT-0400 (Eastern Daylight Time)

new Date("03/21/2021 04:30 pM")

Sun Mar 21 2021 16:30:00 GMT-0400 (Eastern Daylight Time)

new Date("03/21/2021 04:30 pm")

Sun Mar 21 2021 16:30:00 GMT-0400 (Eastern Daylight Time)

```

[Sevvandhi Nagulan]

Hi Bill, 

Greetings from Syncfusion support. 

Query 1:  It seems that the component expects upper case AM/PM, and anything else gets reset to AM automatically. 

We can reproduce the reported issue at our end. We are currently validating the reported issue and we will update further details on March 23^rd, 2021. We appreciate your patience until then. 

Query 2: A second issue is that the picker won't parse a 24 hour time when displaying 12 hour format. For example, if the time picker is formatted in 12 hour time format, then if the user decides to type in "16:30", it's not able to parse it. It would be nice for the picker to just convert it to "04:30 PM". There's no ambiguity that's what the user means to do. 

We checked your query.  We would like to let you that if you use the 12-hour format, such as dd-MMM-yy hh:mm a, it will support the 12-hours format value. When you use the 24-hour format, such as dd-MMM-yy HH:mm, the 24-hours format value will be accepted. Since we parsed the entered value based on the given format property and show the result in the input element.  Kindly check these information and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Bill Naples]

Hi Sevvandhi,

Thanks for the reply.

Regarding #2, the format value is useful for display, but really the parser should be more lenient and parse any format. It's not hard to do that, nor does it lead to ambiguities in parsing time (parsing dates could be ambiguous, although you could use the browser locale metadata to figure that out). It makes the component more human and friendly.

[Sevvandhi Nagulan]

Hi Bill, 

Query 1:  It seems that the component expects upper case AM/PM, and anything else gets reset to AM automatically. 

We considered the reported issue (“Issue with ante meridian(am) and post meridian(pm)”) as a bug at our end. We will include the fix for the reported issue in second patch release after Volume 1 main release which is expected to be rolled on middle of April,2021 . We appreciate your patience until then.    

     

You can track the status of the reported issue from the below feedback link.   

  

Feedback link: https://www.syncfusion.com/feedback/23546/ 

Query 2: the format value is useful for display, but really the parser should be more lenient and parse any format. It's not hard to do that, nor does it lead to ambiguities in parsing time (parsing dates could be ambiguous, although you could use the browser locale metadata to figure that out). It makes the component more human and friendly 

We can parse the value to the given format and update it to the component by using parseDate in the DateTimePicker component. Then the component accepts the 24-hour format value and converts it to 12-hour format. Please see the code below. 

   onBlur(e) { 

    var date = new Date(e.model.inputElement.value); 

    var value = e.model.globalize.formatDate(date, { format: this.format }); 

    e.model.value = value; 

  } 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/angular-d6vodg-qezsib?file=app.component.ts 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Bill Naples]

Thanks very much Sevvandhi.

[Sevvandhi Nagulan]

Hi Bill, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 

Sevvandhi N