How do I work with DatePicker with ISO format model but display the date in "dd/MM/yyyy" format?

[Mark Chidlow]

I'm really struggling to use the DatePicker in a form with a model behind which includes ISO format dates (as it comes from a JSON API).

I want the DatePicker to display the date in dd/MM/yyyy format (for GB).

But I want to bind to a property in ISO date format.

I have the following HTML:

<input ej-datepicker dateFormat="dd/MM/yyyy" locale="en-GB" [(ngModel)]="startDate" id="startDate">

The startDate model is of type Date.

However on form submit I cannot get the selected startDate in ISO 8601 format.

If I set the dateFormat to "yyyy-MM-ddT00:00:00" then of course it works BUT the displayed date is this format too.

How do I work with dates in ISO format but show the date in GB "dd/MM/yyyy" format?

Going round in circles here - would appreciate some guidance please.

Thanks in advance!

[Prem Kumar Madhan Raj]

Hi Mark,   

  

Thanks for contacting Syncfusion support.   

  

We have analyzed your query “to get ISO Dateformat of value” being selected in the date picker. We can use the dateFomat API of date picker to display date of a specific format and to get process the date value in ISO format, please use the provided workaround solution. Here, we have achieved your requirement using click event of button as in the code snippet. Please check it.   

  

[.html]    

   <div class="content-container-fluid">   

        <div class="row">   

            <div class="cols-sample-area" style="height:400px; margin:0 auto;">   

                Datepicker   

                <input ej-datepicker dateFormat="dd/MM/yyyy" locale="en-GB"[(ngModel)]="startDate" id="startDate" >   

                <input type="submit" ej-button (click)="onclick($event)" />   

            </div>   

        </div>   

    </div>   

   

  

[.ts]   

     

onclick() {   

        var datevalue = $("#startDate").val(); //get the value of the datepicker element.   

        var dateobject = ej.parseDate(datevalue,"dd/MM/yyyy","en-GB");// converting the value to Dateobject of specific format and culture.   

        alert("ISO value:"+dateobject .toISOString());// Value converted to ISO format will be available in alert textbox.   

    }   

   

   

For your convenience, we have attached a sample in the below link. Please refer it.   

  

Link: http://www.syncfusion.com/downloads/support/forum/132191/ze/F132191794542106.zip   

  

Regards,   

Prem Kumar. M   

[Mark Chidlow]

Hi Prem,

I am using Angular2 and TypesScript.

I have come up with this which seems to work well...

< input #startDate ej-datepicker dateFormat="dd/MM/yyyy" locale="en-GB" >

@ViewChild('startDate') startDate: any;

let startDate = new Date(this.startDate.widget._preValue);

Is this OK?

[Prem Kumar Madhan Raj]

Hi Mark, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your query and found that you have made use of our datepicker component private variable _prevValue in your sample which may change for release to release. If your requirement is to obtain the previous value of date picker, you can get it with the change event argument of the date picker. If this is not your scenario, then please get back to us with more information about the use case of that private variable such that we can provide you the exact solution. 

 

Regards, 

Prem Kumar. M  

[Mark Chidlow]

Thank you. Is there a more suitable variable I could use that would provide the selected date in ISO format - from TypeScript?

[Prem Kumar Madhan Raj]

Hi Mark, 

 

We have analyzed your query to get the "selected date of the date picker component in ISO format". To get the current selected value of the date picker control, please make of use of this.startDate.widget.model.value instead of this.startDate.widget._prevValue as it returns the previously selected value of the date picker.  

 

 

ngAfterViewInit() { 

       this.modeldate = this.startDate.widget.model.value; 

    } 

 

 

Also, to obtain the current date value of the date picker on every value change in date picker, we can use client side event “change”. Here, we can make use of the arguments of this event to get the value of the selected date and convert it to ISO format as shown in the below code snippet. 

 

[html] 

<input #datepic  ej-datepicker dateFormat="dd/MM/yyyy" locale="en-GB" [(value)]="value" (ejchange)="onChange($event)" id="datepicker" >   

 

[ts] 

export class DatepickerComponent { 

    value: any; 

    modeldate:any; 

    @ViewChild("datepic") startDate: any; 

    constructor() { 

        this.value =new Date(); 

    } 

    onChange(args) { 

        var dateobject = ej.parseDate(args.value, "dd/MM/yyyy", "en-GB");// converting the value to Dateobject of specific format and culture 

        this.modeldate = new Date(dateobject .toISOString());// Value converted to ISO format. 

        alert("ISO value:"+this.modeldate); 

    } 

    ngAfterViewInit() { 

       this.modeldate = this.startDate.widget.model.value; 

    } 

        

} 

 

In the sample, on every change of date picker value, the current date value is obtained from the event argument (args.value) and converted to equivalent ISO format as highlighted in the above code snippet. For your convenience, we have attached the sample in the link below please check it. 

 

Link: http://www.syncfusion.com/downloads/support/forum/132191/ze/F132191_(2)385871621 

 

Regards, 

Prem Kumar. M 

[Mark Chidlow]

Many thanks Prem, this resolves the issue. Again great tech support!

Hoping this thread is of help to other developers.

Regards

Mark

[Prem Kumar Madhan Raj]

Hi Mark, 

 

Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this. 

 

Regards, 

Prem Kumar. M  

[Abhishek]

How do I work with DatePicker with ISO format model but display the date in "dd/MM/yyyy" format?

To handle a DatePicker with an ISO format model while displaying the date in "dd/MM/yyyy" format, you can use the format prop in Material-UI's DatePicker. Set the format attribute to "dd/MM/yyyy" to control the displayed date format. Simultaneously, ensure that the value attribute passed to the DatePicker is in ISO format. This way, you maintain ISO compatibility for handling and storing dates while presenting them in the desired "dd/MM/yyyy" format for a user-friendly display. Adjust the onChange handler accordingly to manage conversions between ISO and display formats if needed.

To know more, read here:  https://purecode.ai/blogs/mui-select/

[Andriyaelenor Farnandus]

Thanks