Kendo Js: Show previous dates which are disabled

Satrughna 0
Viewed 39

I am facing an issue using Kendo Js Date Time Picker.

The situation is: "I have a date time picker which can only allow dates from current time onwards.
Those pages have already been saved, when I am trying to show the date, the dates aren't showing though it became a back date.

My concern is: The input should show the date which has already been saved(Whether that is past or present), but it shouldn't allow user to select back date.

The code are below.
<input id="datetimepicker" />

let options = { //Setting options for the datepicker
  value: new Date(),
  dateInput: true,
  disableDates: function (date) {
    if (date <= new Date()) { 
      return true;
    } else {
      return false;
    }
  },
};
$("#datetimepicker").kendoDateTimePicker(options);

const priorValue = new Date("8/31/2022 2:18 PM"); // Let Already selected date
let selector = "#datetimepicker";

let datetimepicker = $(selector).data("kendoDateTimePicker");
datetimepicker.value(priorValue);
datetimepicker.trigger("change");

function roundToNearest30(date) { //Function to round minutes to nearest 30 minute.
  date = new Date(date);
  const minutes = 30;
  const ms = 1000 * 60 * minutes;

  return new Date(Math.round(date.getTime() / ms) * ms);
}

For your reference a sample dojo I need to show the selected date which is disabled.

kendo-ui date javascript
1 Answers

You can use the disableDates configuration to disable prior dates and the month.content configuration to define how the dates will be rendered and show/hide dates conditionally:

<script id="cell-template" type="text/x-kendo-template">
    <span class="#= (data.date <= new Date() && !isInArray(data.date, data.dates)) ? 'hidden' : 'visible' #">#= data.value #</span>
</script>

Here is a sample dojo.

usergesK0
Related