I've been working with the Kendo DatePicker UI component and I really like the masking and validation it provides if a user wants to manually enter a date when DateInput() is applied. However, it also adds segmentation which means a user either needs to click or use arrow keys to move on to edit other parts of the date like month, day or year. If I remove DateInput() there is no more segmentation, but also no validation or masking. Is there a way to keep validation and masking in the date input field without the segmentation and keep the date picker functionality? My other option is to remove .DateInput() along with the messages and manually apply validation and masking, but if there is a solution within the component itself, that would be ideal. Below is what we currently have.
@(Html.Kendo().DatePicker()
.Format(Model.DateMask)
.Name("DateStart")
.DateInput()
.Messages(m => m.DateInput(d => d.Day("__")))
.Messages(m => m.DateInput(d => d.Month("__")))
.Messages(m => m.DateInput(d => d.Year("____")))
.Culture(UICulture)
.Footer(false)
)
I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:
@(Html.Kendo().Filter<CustomPersonClass>()
.Name("personFilter")
.DataSource("peopleDS")
.ApplyButton(false)
.Fields(f =>
{
f.Add(p => p.LastName).Label("Last Name");
f.Add(p => p.FirstName).Label("First Name");
f.Add(p => p.MiddleName).Label("Middle Name"); f.Add(p => p.StartDate).Label("Start Date").Operators(o => o.Date(d => d.Eq("Is equal to").Gte("Greater than equal").Lte("Less than equal")));
})
)
I have helper code to handle the toolbar in my Kendo Grid like the following, :
@helper ToolbarTemplate()
{
<button class="k-button k-button-solid k-button-solid-base" id="applyFilter"><span class="k-icon k-i-filter"></span>Apply Filter</button>
<button class="k-button k-button-solid k-button-solid-base" id="clearFilter">Reset</button>
<button class="k-button k-grid-excel k-button-solid k-button-solid-base"><span class="k-icon k-i-excel"></span>Export to Excel</button>
}
I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:
$("#applyFilter").click(function (e) { //e.preventDefault(); var myFilter = $("#personFilter").getKendoFilter(); localStorage["kendo-person-filter-options"] = kendo.stringify(myFilter.getOptions().expression); myFilter.applyFilter(); });
The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data. Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering? That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.
@(Html.Kendo().DatePicker()
.Name("ProcedureDateEnd")
.DateInput()
///// how to use messages here?
)
I have a model class given below in MVC. I am trying to set MinDate and MaxDate for the DatePicker
public class YourModel { public DateTime Deadline { get; set; } public DateTime MinDate { get; set; } public DateTime MaxDate { get; set; } }
@(Html.Kendo().DatePickerFor(x => x.Deadline) .Name("datepicker") // Set the name attribute .Format("MM/dd/yyyy") .Min(DateTime.Today) // Set the minimum date .Max(DateTime.Today.AddMonths(3)) // Set the maximum date (in this example, 3 months from today) .HtmlAttributes(new { id = "datepicker" }) // Set the ID attribute )
How can we make sure optional field is not validated? Also the model is a DateTime? type.
i.Add()
.Field(x=>x.ProductionDate)
.Label(l => l.Text(Extensions.GetPropertyDisplayName<Detail_InfoForm_ViewModel>(x => x.ProductionDate)).Optional(true))
.Editor(e => e.DatePicker()
.HtmlAttributes(new { style = "width: 100%", title = "Production date" })
.DateInput()
);
I've just started a new project and used the latest release of the framework (v2022.3.1109). Unfortunately I've encountered some issues which didn't appear using earlier versions of the framework (pre R1 2022 I believe).
The problems are
Is there any documentation detailing the changes from R1 2022 and how to achieve these relatively simple appearance changes?
I'm using bootstrap 5 and the kendo.bootstrap-nordic.min.css css file.
Thanks
Hello,
I am Kendo Grid in MVC
The grid is set up for in-cell batch editing. One of the fields is a date field. If the date is selected using date picker the value stays in the cell, whereas if the date value is manually entered the value does not hold in the cell. Any suggestions why the value is not holding in the cell when manually entered.
Thank you
Hi,
Am getting 'Kendo is not defined' error while using date picker MVC UI control.
Uncaught ReferenceError: kendo is not defined
Hi ,
We have a validation related requirement on the datepicker control. The datepicker control should not allow alphabets or special chars to be keyed in. It should allow only numerics, backspace and forward slaces keys for example: 10/10/2022.
The requirement is to validate it as soon as its keyed in instead of when the control lose focus.
Because datepicker control does not have keydown/key press event, I added a jquery script as below and it works fine but we dont want to repeat the script for all the date pickers controls on different screens across the project. Is there any feature of the control it self that can be used everywhere??
Thanks,
Chhavi