how to set min date for kendo datetime picker

问题

Hi I've a kendo template and that template contains a textbox like below with datetime picker.

<script id="popup_editor" type="text/x-kendo-template">
    <input data-role="datepicker" data-bind="value: datePickerValue" />
</script>

Now I want to set min value for this. i.e I dont want to permit to select previous days than today.

Any example?

回答1:

Try this

var myDatePicker = $("#myDatePicker").kendoDatePicker().data("kendoDatePicker");
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
myDatePicker.min(new Date(year,month,day));

回答2:

Usually, you can do some javascript here:

var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date());

but I'm not sure if it's going to work within your template that way. Maybe it's a start.

回答3:

Ok I had to implement something similar recently and found a straightforward way to do this. I realize this is way too late, but I found this question, while I was doing my research.

Say the below is your template: (Simplified for brevity)

    <div class="k-block k-shadow">
        <p>Contract Start Date: </p>
        <input type="text"  tabindex="7"
            class="k-input k-textbox"
            name="Contract_Start_Date"
            id="Contract_Start_Date"
            data-bind="value:Contract_Start_Date"
            data-format="MMMM yyyy"
            data-start="year"
            data-depth="year"
            data-change="setContractMinEnd"
            data-role="datepicker" />
    </div>
    <div class="k-block k-shadow">
        <p>Contract End Date: </p>
        <input type="text"  tabindex="8"
            class="k-input k-textbox"
            name="Contract_End_Date"
            id="Contract_End_Date"
            data-bind="value:Contract_End_Date"
            data-format="MMMM yyyy"
            data-start="year"
            data-depth="year"
            data-role="datepicker" />
    </div>

The below code for the Contract_Start_Date field assigns a JS function to the "Change" event of that field:

data-change: setContractMinEnd

I added the above function in a script block to go out with the page. And now every time the start date is changed the end date gets a min value which is the start date:

function setContractMinEnd() {
    var edval = $('#Contract_Start_Date').data("kendoDatePicker");
    var sdval = $('#Contract_End_Date').data("kendoDatePicker");
    if (sdval && edval) {                        
        edval.min(sdval.value());
    }
}

You can obviously get fancy with that logic and set the below or something to that effect:

 edval.min(new Date())

Hope it helps someone...

回答4:

You can just pass data-min="your Date in proper format" in html input.

<script id="popup_editor" type="text/x-kendo-template">
    <input data-role="datepicker" data-bind="value: datePickerValue" data-min="min_date_value" />
</script>

This will not even show dates beyond the minimum value.

来源：https://stackoverflow.com/questions/17850979/how-to-set-min-date-for-kendo-datetime-picker

标签

kendo-ui

datetimepicker