How to set format for all datetimepickers at once?

[Koen]

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]

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]

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]

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:  

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-973214914 

 

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.