I want to change the datepicker format

[Muthukumar Periasamy]

Hai Team,

      I am developing a web application using angular 4 (Typescript) and Asp.Net Core.I am using a date field in my form in that I need to change the format for the Datetimepicker as DD/MM/YYYY. So Please provide a quick solution for this request.

Herewith I attach my code please check it and get back to us soon.

    <input type="text" [(ngModel)]='safetyenvinstance.incidentDatetime' name="incidentdatetime" e-dateformat="dd-MM-yyyy" enableStrictMode="true" id="incidentDateTime"      ej-datetimepicker width='320px' #nameIncidentDateTime="ngModel" watermarkText="Enter Incident Datetime" required autocomplete="off">

Regards,
Sridhar 

[Deepa Loganathan]

Hi Sridhar, 

 

Thanks for contacting Syncfusion support. 

 

We have checked the code snippet provided in your last update and saw that you have used the e-dateformat to set the format for Datetimepicker which is not a property of Datetimepicker helper. So we suggest using the dateTimeFormat  API to set the date and time format of Datetimepicker as given in the below code. 

 

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

            DateTimepicker 

            <input type="text" ej-datetimepicker id="datetimepick" dateTimeFormat="dd/MM/yyyy"/> 

        </div> 

 

Please check the below help page to know more about the APIs available in Datetimepicker component.  

 

https://help.syncfusion.com/api/js/ejdatetimepicker#members:datetimeformat 

 

For your convenience, we have prepared a simple application using angular 4 and ASP.NET Core to showcase the usage of Datetimepicker component. Please check the below link. 

 

Sample:   

 

http://www.syncfusion.com/downloads/support/forum/140885/ze/DateTimePicker-186575826  

  

  

Once the sample is downloaded and unzipped, please run the below commands to run the sample and navigate to http://localhost:5000/  to see the output. 

 

• npm install  
• npm install syncfusion-javascript --save  
• npm install ej-angular2 --save  
• npm install --save-dev @types/jquery  
• npm install --save-dev @types/ej.web.all  
• npm run build  
• dotnet run

 

 

Also, check out the following links to know more about DateTimePicker in Angular platform. 

 

Documentation : https://help.syncfusion.com/angular/datetimepicker/getting-started  

 

Demo samples : http://ng2jq.syncfusion.com/#/datetimepicker/default;theme=bootstrap  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Deepa L.