Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 3.9 KB

datetimepickers-select-only-dates-in-specific-range.md

File metadata and controls

85 lines (64 loc) · 3.9 KB
title description type page_title slug tags ticketid res_type
Enabling Only Dates in a Specific Date Range using DateTime Picker in {{ site.framework }}
Learn how to utilize the DisableDates handler functionality of the DateTimePicker in {{ site.framework }} to restrict the selection of dates.
how-to
Selecting Dates between Current Date and Next 30 Days using DateTime Picker in {{ site.framework }}
datetimepickers-select-only-dates-in-specific-range
datetimepicker, date-selection, disable-dates, specific, date-range, restrict, rules
1634938
kb

Environment

| Product | Date/Time Pickers for {{ site.framework }} | | Version | 2023.3.1114 |

Description

I want to select a DateTime between the current date and the following 30 days using the DateTime Picker in {{ site.framework }}. I would like to restrict the selection to only dates within this range and disable dates outside of it.

Solution

To achieve this, you need to utilize the DisableDates handler functionality of the DateTimePicker in {{ site.framework }}.

Modify the JavaScript logic of the [DateTimePicker Disabled Dates Demo](https://demos.telerik.com/{{ site.platform}}/datetimepicker/disable-dates) with the code below:

function disableDates(date) {
    var currentDate = new Date();
    currentDate.setDate(currentDate.getDate() - 1);
    var endDate = new Date();
    var monthIndex = (new Date().getMonth() + 1) % 12;
    if (monthIndex == 0) {
        endDate.setYear(endDate.getFullYear() + 1);
    }
    endDate.setMonth(monthIndex);

    if (date && compareDates(date, currentDate, endDate)) {
        return false;
    } else {
        return true;
    }
}

function compareDates(date, startDateRange, endDateRange) {
    if (date.getTime() > startDateRange.getTime() && date.getTime() < endDateRange.getTime()) {
        return true;
    } else {
        return false;
    }
}

See the suggested behavior in action in this Telerik REPL example.

Notes

  • This solution uses JavaScript logic to disable the dates outside the specified range.
  • The code provided compares the selected date with the current date and the end date (current date + 30 days) to determine if it falls within the range.
  • You may need to adjust the logic to fit the specific restriction rules of the scenario at hand.

More {{ site.framework }} DateTimePicker Resources

  • [{{ site.framework }} DateTimePicker Documentation]({%slug htmlhelpers_datetimepicker_aspnetcore%})

  • [{{ site.framework }} DateTimePicker Demos](https://demos.telerik.com/{{ site.platform }}/datetimepicker/index)

{% if site.core %}

{% else %}

See Also