datepicker.appendTo creating new calendar instead of altering the old one

[shahzaib]

hi, as per my requirement i need to change datePicker properties like Min,Max from javascript but with the following code its creating a new calendar instead of altering the old one

below is the js

<script>

 var datepicker = new ej.calendars.DatePicker({

                        //sets the min date

                        min: new Date(data),

                        ////sets the max date

                        max:new Date('@Model.MaxDate.ToString("yyyy-MM-dd'T'HH:mm:ss.fffffff'Z'")'),

                    });

                        datepicker.appendTo('#date');

</script>

and this is the control in .cshtml file

                            <ejs-datepicker id="date" format="dd/MM/yyyy" min="Model.MinDate" max="Model.MaxDate" ejs-for="date" placeholder="Choose a Date" enabled="true"></ejs-datepicker>

[shahzaib]

i have got it working but currently i need to reset max value to from javascript which i don't want.

i just want to change min value that too conditionally

below is the code

<script>

 var datepickerObject = document.getElementById("date").ej2_instances[0];

                    console.log(datepickerObject);

                    datepickerObject.properties = {

                        format: "dd/MM/yyyy",

                    max: new Date('@Model.MaxDate.ToString("yyyy-MM-dd'T'HH:mm:ss.fffffff'Z'")'),

                    min: new Date(data),

                        placeholder: "Choose a Date",

                    }

</script>

[Ponmani Murugaiyan]

Hi Shahzaib, 

Greetings from Syncfusion support. 

Query: I just want to change min value that too conditionally. 

 

You can change the min value dynamically as like below code snippet. We have prepared sample by dynamically changing min property in button click. Here we have attached the sample for your reference. 

 

<div id="daterangepicker-control"> 

   <form method="post"> 

      <ejs-datepicker id="date" format="dd/MM/yyyy" min="@Model.MinDate" max="@Model.MaxDate" name="value" ejs-for="@Model.value"></ejs-datepicker> 

       <div id="errorMessage"> 

           <span asp-validation-for="value"></span> 

        </div> 

        <div id="submitbutton"> 

            <ejs-button id="submitButton" content="Submit"></ejs-button> 

       </div> 

    </form> 

   <ejs-button id="dynamic" content="change min dynamically"></ejs-button> 

</div> 

     

<script> 

  document.getElementById("dynamic").onclick = function () { 

     var datepickerObject = document.getElementById("date").ej2_instances[0]; 

     datepickerObject.min = new Date('11/03/2020'); 

  } 

</script> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Datepicker-678292504  

 

Kindly check with the above sample to meet your requirement. Please get back us if you need further assistance. 

 

Regards, 

Ponmani M