DateRangePicker disable selection before and after a date range

[Yannick Gasser]

   Hello guys,

I try to find a way to set a limit with the DataRangePicker. As I saw in your documentation, it's not really implemented ? I tried to find a workaround... but I can't achieve. Could you help me please ?

Here is my code (My model contains a List<DateTime> called AvailableDates) :

 @using (Html.BeginForm("Index", "Datalog", FormMethod.Get))

        {

            <div class="col-md-6">

                @(Html.EJ()

                      .DateRangePicker(datalogPickerId)

                      .StartDate(Model.AvailableDates.First())

                      .EndDate(Model.AvailableDates.Last())

                      .EnableTimePicker(true)

                      .ShowRoundedCorner(true)

                      .ClientSideEvents(p => p.Select("onSelect"))

                      .Width("100%"))

            </div>

            <div class="col-md-6">

                @Html.EJ().Button("btn").Size(ButtonSize.Small).Text("Set time").Type(ButtonType.Submit).Width("100%")

            </div>

        }

 @section scripts

 {

<script>

         function onSelect(datepicker) {

             var minDate = new Date('@Model.AvailableDates.First().ToString(dateFormat)');

             var maxDate = new Date('@Model.AvailableDates.Last().ToString(dateFormat)');

             console.log("--------------------------------");

             console.log(minDate + " " + maxDate);

             console.log(datepicker.startDate + " " + datepicker.endDate);

             if (datepicker.startDate < minDate) {

                 datepicker.startDate = minDate;

             }

             if (datepicker.endDate > maxDate) {

                 datepicker.endDate = maxDate;

             }

             datepicker.render();

         }

</script>

 }

[Sureshkumar P]

Hi Thierry, 

 

Thank you for contacting Syncfusion support, 

 

We have an option to set the range values by using Min and Max property in DateRangePicker component. Also, we have represent our online documentation for how to render the DateRangePicker component with range representation. Please refer the below code-block to know about setting the range values to the DateRangePicker component.  

[sample.cshtml] 

 

@Html.EJS().DateRangePicker("daterange").Min(ViewBag.minDate).Max(ViewBag.maxDate).Width("200px").Render() 

 

[sampleController.cs] 

              

     public ActionResult Index() 

        { 

            ViewBag.minDate = new DateTime(2018, 03, 10); 

            ViewBag.maxDate = new DateTime(2018, 04, 20); 

            return View(); 

 

        } 

Also, to know more about setting the range restriction please refer the online demo sample link:  https://aspnetmvc.syncfusion.com/DateRangePicker/DateRange#/material  

For your convenience we have created a sample with range restriction here: http://www.syncfusion.com/downloads/support/forum/136914/ze/DateRangePicker49120832  

 

Regards, 

Sureshkumar P 

[Yannick Gasser]

Thank you for your help. It works pretty good, BUT when I use EJS instead of EJ, I cannot use a TimePicker with my DateRangePicker. I cannot see the property with IntelliSense. Can you indicate me how to use the TimePicker please  ?

[Prem Kumar Madhan Raj]

Hi Thierry,   

  

Thanks for the update.   

  

In EJ2 DateRangePicker there is no support to select a Time value at UI level, but you can have a DateTime range by defining a custom format using format API of DateRangePicker component since we have provided support with DateTime object for our DateRangePicker component. You can also check our samples in our online sample browser to change the format in DateRangePicker component.   

  

Sample Link: http://ej2aspmvc.azurewebsites.net/DateRangePicker/Format#/material    

  

However, we have considered this requirement as a feature at our end and this feature will be included in any of our upcoming releases. We appreciate your patience until then.   

  

Regards,   

Prem Kumar M