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. Image for the cookie policy date

I want to change the datepicker format

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">


1 Reply

DL Deepa Loganathan Syncfusion Team November 14, 2018 08:42 AM UTC

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;"> 
            <input type="text" ej-datetimepicker id="datetimepick" dateTimeFormat="dd/MM/yyyy"/> 
Please check the below help page to know more about the APIs available in Datetimepicker component.  
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. 
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. 
Please, let us know if you need any further assistance. 
Deepa L. 

Live Chat Icon For mobile
Up arrow icon