DatePicker methods/properties can be accessed only after plugin creation

[Unknown]

Hello

On my website are 2 DatePicker controls ("from" and "to"). I use the unobtrusive option and a model where the values of the 2 DatePickers are stored and sent to the server with ajax.

What I want to achieve is the following:

When the "from" date is changed, check if it is bigger than the to date, if so set "to" to "from".

When the "to" date is changed, check if it is smaller than the from date, if so set "from" to "to".

Therefore I have a function for the "onChange" event of both DatePickers, where I check these conditions. 

However, if I want to access the DatePickers like this "var fromDP = $("#FromDatePicker").data("ejDatePicker");" the variable is "undefined".

If I try to access it like this "var fromDP = $("#statsFromDatePicker").ejDatePicker('instance');" I always get the following error:

"Uncaught ejDatePicker: methods/properties can be accessed only after plugin creation. Error: ejDatePicker: methods/properties can be accessed only after plugin creation"

It seems a bit odd that I get this error, since the control is clearly created (I can choose dates and the onChange event is fired).

Since I use the "FOR" controls I need to change some things, as stated in the article How to define properties for FOR controls, however this did not change anything for me. I still get the same errors as before.

In my .cshtml the DatePickers are like this:

...

@(Html.EJ().DatePickerFor(f => f.From, (Syncfusion.JavaScript.Models.DatePickerProperties)ViewData["fromProperties"]))

...

The controller code:

...

var fromProperties = new DatePickerProperties

{

Locale = "en-GB",

DateFormat = "dd.MM.yyyy",

HtmlAttributes = new Dictionary<string, object> { {"id", "FromDatePicker" } },

Change = "datePickerFromOnChange",

Create = "datePickerOnCreate"

};

ViewData["fromProps"] = fromProps;

...

Could you help me solve this issue?

Kind regards

Phil

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Phil, 

 

Thanks for contacting Syncfusion Support. 

 

The reported error may occur when incorrect control id were used while creating instance of the control. In DatePickerFor, model’s property name will be set as the id of DatePicker. We have modified the code sample provided by you to resolve this error. 

 

[my.cshtml] 

 

    @Html.EJ().DatePickerFor(model => model.From, (Syncfusion.JavaScript.Models.DatePickerProperties)ViewData["date"]).Width("100%") 

             

            @Html.EJ().DatePickerFor(model => model.To, (Syncfusion.JavaScript.Models.DatePickerProperties)ViewData["date"]).Width("100%") 

 

<script> 

    function OnSelect(args) { 

        alert("yes") 

        var p = $("#From").ejDatePicker("instance"); 

        var m = $("#To").ejDatePicker("instance"); 

        if (p.model.value < m.model.value) { 

            val = p.element.val(); 

            p.option("value", m.element.val()); 

            m.option("value", val); 

        } 

    } 

</script> 

 

 

  

For your convenience, we have also attached a sample based on your requirement. 

 

Sample: 

 https://www.syncfusion.com/downloads/support/directtrac/132976/SYNCFU~245059252.ZIP  

 

Please check out the below link to know further about Strongly-Typed HTML Helper support in EJ controls. 

 

https://help.syncfusion.com/aspnetmvc/strongly-typed-html-helper  

 

Regards, 

 

Shameer Ali Baig S. 

[Unknown]

Hello

It is exactly as you said, I used the wrong Id to access the DatePicker.

I just needed to use "From" instead of "FromDatePicker" ($("#From").ejDatePicker("instance")) and everything works as expected.

Thank you a lot for your help.

Kind regards

Phil

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Phil, 

 

Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance on this.  

 

Regards, 

 

Shameer Ali Baig S.