Check documentation for the latest version of dhtmlxSuite Date Formatting DHTMLX Docs

Date Formatting

You can configure the date format and language settings used for dates in dhtmlx components. There are just several steps to complete.

  • set the necessary language to be used for dates in the dateLang property:
window.dhx.dateLang = "en";
  • specify the names of days and months in the chosen language by means of the dateStrings property:
window.dhx.dateLang = "en";
window.dhx.dateStrings = {                                                          
    en: {
        monthFullName:  ["January","February","March","April","May","June","July",      
                           "August","September","October","November","December"],       
        monthShortName: ["Jan","Feb","Mar","Apr","May","Jun","Jul",                     
                           "Aug","Sep","Oct","Nov","Dec"],                              
        dayFullName:    ["Sunday","Monday","Tuesday","Wednesday","Thursday",            
                           "Friday","Saturday"],                                        
        dayShortName:   ["Su","Mo","Tu","We","Th","Fr","Sa"]                            
    }
};
  • define the desired date format in the dateFormat property:
window.dhx.dateLang = "en";
window.dhx.dateStrings = {
    en: {
        monthFullName:  ["January","February","March","April","May","June","July",
                           "August","September","October","November","December"],
        monthShortName: ["Jan","Feb","Mar","Apr","May","Jun","Jul",
                           "Aug","Sep","Oct","Nov","Dec"],
        dayFullName:    ["Sunday","Monday","Tuesday","Wednesday","Thursday",
                           "Friday","Saturday"],
        dayShortName:   ["Su","Mo","Tu","We","Th","Fr","Sa"]
    }
};
window.dhx.dateFormat = {                                                                   en: "%Y-%m-%d"                                                                      };
  • call the date2str() method to apply the settings to the date:
window.dhx.date2str(val, format);

where:

  • val - the date to be formatted;
  • format - the date format;

Available Date Formats

While specifying the format for dates you can use any character from the following list:

%d day as a number with leading zero, 01..31
%j day as a number, 1..31
%D short name of the day, Su Mo Tu...
%l full name of the day, Sunday Monday Tuesday...
%m month as a number with leading zero, 01..12
%n month as a number, 1..12
%M short name of the month, Jan Feb Mar...
%F full name of the month, January February March...
%y year as a number, 2 digits
%Y year as a number, 4 digits
%h hours 12-format with leading zero, 01..12)
%g hours 12-format, 1..12)
%H hours 24-format with leading zero, 01..24
%G hours 24-format, 1..24
%i minutes with leading zero, 01..59
%s seconds with leading zero, 01..59
%a am or pm
%A AM or PM
%% escape for %
%u milliseconds
%P timezone offset
Back to top