Subscribe to Youtube channel

Devexpress Datebox date formatting in angular 6 with example

The Devexpress DateBox in Angular is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an
external localization library, or a type in the required date/time value. In this article,
the i will provide you different date-format which we can set on DateBox to show date and time to user.

Following is the code snippet to add Datebox in your Angular form if the you want to capture only date

    
    <dx-date-box  
         [value]="now"  
         displayFormat="EEEE, MMM dd" type="date" >  
       </dx-date-box>  


Following is the custom formats we can set and depending upon its converted values will be shown.

 "dd-MM-yyyy" => 28-10-2018  
 "EEEE, MMM dd" => Sunday, Oct 28  
 "dd MMM yyyy EEEE" => 28 Oct 2018 Sunday  
 "dd-MM-yyyy EEEE" => 28-10-2018 Sunday  

alternatively you can change the format as way you want


Following is the code snippet to add Datebox in your Angular form if the you want to capture date and time. we just need to change "type" attribute to "datetime".

  <dx-date-box  
         [value]="now"  
         displayFormat="EEEE, MMM dd hh:mm:ss a" type="datetime" >  
       </dx-date-box>  



Following is the custom formats for date & time we can set and depending upon formats its converted values will be shown to user.

 "EEEE, MMM dd hh:mm:ss a" => Sunday, Oct 28 12:20:31 PM  
 "dd-MM-yyyy hh:mm:ss a" => 28-10-2018 12:20:31 PM  


if you want to show the format in 24 hours you can use following strings

 "EEEE, MMM dd HH:mm:ss" => Sunday, Oct 28 16:24:10  
 "dd-MM-yyyy HH:mm:ss" => 28-10-2018 16:24:10  


I have given enough example of all possible format strings which you can change according to your need if you want.

Please provide me feedback if you want i am eagerly waiting for your comments.

Hope this will solve your query.
  

Comments

Popular posts from this blog

Root your Gingerbread 2.3.4 android Mobile Phone

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

Disable backspace key using Jquery

Restore the lost focus of Auto post back controls in asp.net update Panel control

Implement Nlog in .Net core MVC application part 1

Angular User Session Timeout example step by step

How to Import CSV File and bind csv file data to gridview in asp.net using c#

Add Comma automatically while entering amounts in textbox using Javascript