DatePicker Validation when DB Column is True

[Tyler]

I have a DatePicker where I want validation to happen(the message to say something like "Date is already Posted" when a user selects a date from the datepicker that has  Posted(a bool column in the database) value of 1. It will be reading from the column Transaction_Date to look at the date and the Posted column to see if it is true. 

 

The other possible function would be to disable the date in the datepicker where the Transaction_Date value has a posted = 1 

 

Either way would work but I would prefer the validation as I plan to disable a different set of dates in the datepicker.

 

 

[Konstantin Dikov]

Hello Tyler,

Could you please provide more information about the scenario that you have? If the DatePicker is editor in the Grid, it should be possible to disable it based on a value from the model, but the approach will differ with different edit modes, so if the picker is used in such context, please elaborate on the Grid's configuration.

As more general approach, you could handle the "edit" event of the Grid, get reference to the editor and disable it using its "enable" method to disable it :

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit
• https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/enable

Looking forward to your reply.


Regards,
Konstantin Dikov
Progress Telerik

[Tyler]

The datepicker is in an editor template.  When a user goes to create a new transaction, the date has to be smart enough to look at the TRANSACTION_DATE column and the POSTED column to validate dates which for example (Transaction Date = 09/08/2018 and Posted=1) . This will also apply for the update as well. 

 

    @(Html.Kendo().DatePickerFor(model => model.TRANSACTION_DATE).HtmlAttributes(new { @class = "datepicker" }).Format("MM/dd/yyyy").DateInput(true))
        @Html.ValidationMessageFor(model => model.TRANSACTION_DATE, "", new { @class = "text-danger" })

 

Current Create Method

  public ActionResult Transactions_Create([DataSourceRequest]DataSourceRequest request, TransactionViewModel model)
        {
            
            var transaction = Mapper.Map<Transaction>(model);
            if (transaction != null && ModelState.IsValid)
            {
                      new TransactionRepository().Create(transaction);
            }
                return Json(new[] { transaction }.ToDataSourceResult(request, ModelState));  
        }

[Konstantin Dikov]

Hello Tyler,

You could try the following code within the Edit event of the Grid:

function onEdit(e){
    var picker = e.container.find("#TRANSACTION_DATE").data("kendoDatePicker");
    if(e.model.POSTED){
       picker.enable(false);
    }
}

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Tyler]

I tried to do that and it didn't work...I was looking at the original script used to get disabled dates https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates

Is there a way that instead of having hard coded dates...I can use a method to get the dates and put them into that script? Like where the 

var dates = [new Date("1/1/2015"),new Date("1/19/2015"),new Date("2/16/2015"),new Date("4/16/2015"),new Date("5/10/2015"),new Date("5/25/2015"),new Date("6/21/2015"),new Date("7/3/2015"),new Date("9/7/2015"),new Date("10/12/2015"),new Date("11/11/2015"),new Date("11/26/2015"),new Date("11/27/2015"),new Date("12/25/2015")];

 

Instead of having those hardcoded dates, can pull those dates from a table in the DB?

[Konstantin Dikov]

Hi Tyler,

The disabled dates could be returned by a function, as shown in the second DatePicker in the demo that you have linked:

@(Html.Kendo().DatePicker()
                .Name("national-date-picker")
                .DisableDates("disableDates")
            )

function disableDates(date) {
    var dates = [....]
    return dates;
}

However, if you want to make AJAX request for the list with the disabled dates you will have to re-initialize the DatePicker within the success of the request, using the setOptions method of the widget:

var picker = $("#weekend-date-picker").data("kendoDatePicker");
var options = picker.options;
options.disableDates = [new Date("11/13/2015"), new Date("11/14/2015")]; //this array will be taken from the response in your scenario
picker.setOptions(options);

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik