Kendo grid date from and date until when inline editing

Question

I had this kendo grid. For column dateFrom and dateUntil its possible when I edit the past date from today I able to see the date in grey value? Currently when I edit past date the field will become null.

DEMO IN DOJO code is too long and i cannot display here.

David Shorthose David Shorthose · Accepted Answer · 2020-06-22T09:22:22

Hopefully Updated Dojo this will help.

I have made an assumption that you only want the min date of the control to be set to before the current day if there is a value that already exists and that a new record should not be able to select a date before the current date.

All I have done is add a condition onto into the kendoDateFrom function to check if the date from this field is before the presentDate variable and if it is then set the min value of the control to this date for you. I also added a check for a new entry and check if the value is undefined to set it to the current date for you.

if(options.model[options.field] != undefined && 
 kendo.parseDate(options.model[options.field], "MM/dd/yyyy") < presentDate){
    presentDate = options.model[options.field]; 
  }
  else 
  {
    presentDate = new Date(); 
  }

If your requirement is different then please provide more information in the question to help assist with your requirements.

EDIT So based on your updated requirements I have updated the dojo with what i think you want.

Modified Dojo

I have tweaked the dojo to resolve a couple of issues for you.

added a new currentMinDate variable which will be used as our min date check.
altered the min date checking to resolve the random blanking of dates.
when a date is in the past enable that date but disable all dates between that date and the present date (assuming that is what you want to happen if the date needs to be changed.
Added the parseFormats setting to ensure it can parse the date format you are providing.
Expanded your dataSource so that the update button would save the changes to the local array.

The disable date function does a couple of things:

checks to see if the date passed in is null or a date
checks to see if the date passed in is less than the present date
checks to see if the date passed in is not equal to the current min date

if it resolves all of those to true then it disables the date so it can't be selected, importantly it ensures that it doesn't disable the current selected date in the past so it will select it. If that date was disabled as well then it would be able to select the disabled date as it is treated as invalid.

disableDates:function(date){
      console.log('disabling dates function, current passed Date::::', date); 
      console.log(date == currentMinDate, date, currentMinDate); 
      if(date && date.getDate() < presentDate.getDate() && 
         date.getDate() != currentMinDate.getDate())
      {
        console.log(date,currentMinDate,  'disabled'); 
        return true;
      }
      else 
      {
        console.log(date,currentMinDate,  'not disabled'); 
        return false; 
      }
      
    },

I have left my comment statements in so you can see what is happening.

Hope this helps you out now.

Kendo grid date from and date until when inline editing

1 Answers