How to set format for all datetimepickers at once?

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"

Reply | Reply with quote

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>

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.

Reply | Reply with quote

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

Reply | Reply with quote

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:

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US