We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

132191 Aug 18,2017 12:27 PM UTC Aug 28,2017 11:27 AM UTC Angular 7
loading
Tags: ejDatePicker
Mark Chidlow
Asked On August 18, 2017 12:27 PM UTC


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 [Syncfusion]
Replied On August 21, 2017 11:29 AM UTC

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:400pxmargin: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.   
  
  
Regards,   
Prem Kumar. M   


Mark Chidlow
Replied On August 22, 2017 04:44 PM UTC

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 [Syncfusion]
Replied On August 23, 2017 01:12 PM UTC

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
Replied On August 23, 2017 03:48 PM UTC

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 [Syncfusion]
Replied On August 24, 2017 12:04 PM UTC

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. 
 
 
Regards, 
Prem Kumar. M 


Mark Chidlow
Replied On August 25, 2017 08:30 AM UTC

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 [Syncfusion]
Replied On August 28, 2017 11:27 AM UTC

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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;