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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set format for all datetimepickers at once?

Thread ID:

Created:

Updated:

Platform:

Replies:

147703 Sep 20,2019 11:08 AM UTC Sep 24,2019 01:33 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: DatePicker
Koen
Asked On September 20, 2019 11:08 AM UTC

I have multiple <ejs-datetimepicker/> instances on my page. How can I set the format of all of them at once?

I tried the following jquery method:

$(".e-datetimepicker").each(function () {
    $(this).ej2_instances[0].format = 'dd/MM/yy HH:mm';
});

But this throws an error "Cannot read property '0' of undefined"

Ashokkumar Balasubramanian [Syncfusion]
Replied On September 23, 2019 09:16 AM UTC

Hi Koen Janssens, 
 
Good day to you.  
 
We have checked your provided code block and reported problem at our end. The reported problem due to on creating the DateTimePicker component instance on before component creation. Could you please ensure this scenario at your end? 
 
<div> 
    <ejs-datetimepicker id="datetimepicker1"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker2"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker3"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker4"></ejs-datetimepicker> 
    <button id="btn" onclick="onButtonClick()">Click to change the Format</button> 
</div> 
 
<script> 
    function onButtonClick() { 
        //Get all the DateTimePicker Elements in documents 
        var datePickerElements = document.querySelectorAll(".e-datetimepicker"); 
        for (var i = 0; i < datePickerElements.length; i++) { 
            //Creating instance for DateTimePicker and set the format property 
            datePickerElements[i].ej2_instances[0].format = "dd/MM/yy HH:mm"; 
        } 
    } 
</script> 
 
Note: Could you please ensure to whether you have creating the instance for DateTimePicker component on after component loaded in DOM or not? 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Koen
Replied On September 23, 2019 10:35 AM UTC

Thanks,

Your code does work.
But what I wanted to achieve is setting all datetimepickers to a specific format when the page loads. However, the controls are initially loaded with the default (US) dateformat, and when the javascript code kicks in, I can see the format changing.
Is there any other way to apply a "default" application-wide timeformat (and other options like firstdayofweek, step,...) to all datetimepickers that does not result in a visual "delay"?

Thanks,
Koen

Ashokkumar Balasubramanian [Syncfusion]
Replied On September 24, 2019 01:33 PM UTC

Hi Koen Janssens,  
 
For this scenario, you can use the below code block to get all the date picker elements and access the format property in your application. 
 
$(document).ready(function () { 
        $(".e-datetimepicker").each(function () { 
            $(this)[0].ej2_instances[0].format = 'dd/MM/yy HH:mm'; 
        }); 
    }); 
 
Sample:  
 
 
Also, you can set the same format to all the date time picker using tag helper as mentioned below code snippet, 
 
<ejs-datetimepicker id="datetimepicker1" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker2" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker3" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker4" format="@ViewBag.format"></ejs-datetimepicker> 
 
public IActionResult Index() 
{ 
     ViewBag.format = "dd/MM/yy HH:mm"; 
     return View(); 
} 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon