I have the following set of code for picking a start date and end date from user in the 'dd/MM/yyyy HH:mm tt' format.
<tr>
<td>Start DateTime</td>
<td>
@(Html.Kendo().DateTimePickerFor(model => model.StartDateTime).Name("StartDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy HH:mm tt" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
</td>
</tr>
<tr>
<td>Expiration DateTime</td>
<td>
@(Html.Kendo().DateTimePickerFor(model => model.ExpirationDateTime).Name("ExpirationDateTime").Format("dd/MM/yyyy HH:mm tt").ParseFormats(new string[] { "dd/MM/yyyy HH:mm tt" }).HtmlAttributes(new { style = "width:300px;", onkeydown="javascript:return false;" }))
</td>
</tr>The javascript code is as follows :
$(document).ready(function () {
function onChange() {
var StartDateTime = $("#StartDateTime").val().split(" ");
var date = StartDateTime[0].split("/");
var time = StartDateTime[1].split(":");
var dd = date[0];
var MM = date[1];
var yyyy = date[2];
var HH = time[0];
var min = time[1];
var tt = StartDateTime[2];
StartDateTime = new Date(yyyy,MM-1,dd,HH,min);
var ExpirationDateTime = new Date(StartDateTime.setHours(StartDateTime.getHours() + 1));
$("#ExpirationDateTime").data("kendoDateTimePicker").value(ExpirationDateTime);
}
$("#StartDateTime").kendoDateTimePicker({
change: onChange,
format: "dd/MM/yyyy HH:mm tt",
parseFormats: ["dd/MM/yyyy HH:mm tt"]
}).data("kendoDateTimePicker");
$("#ExpirationDateTime").kendoDateTimePicker({
format: "dd/MM/yyyy HH:mm tt",
parseFormats: ["dd/MM/yyyy HH:mm tt"]
}).data("kendoDateTimePicker");
});The underlying model :
[Required(ErrorMessage = "Start Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime StartDateTime { get; set; }
[Required(ErrorMessage = "Expiration Datetime is required.")]
[DataType(DataType.DateTime)]
public DateTime ExpirationDateTime { get; set; }But whenever I do a sumbit, I get error saying :
- The value '18/11/2021 10:59 AM' is not valid for StartDateTime.
- The value '18/11/2021 11:59 AM' is not valid for ExpirationDateTime.
But if the day(dd) is less than or equal to 12 , the date is accepted. How do I make it accept all dates and in the format I want?
1 Answer, 1 is accepted
Hello AJ,
US is the default culture, which means the first part of a date is treated as month, i.e. month/day/year. Format is set in the DatePicker but this only has effect on how the date will be displayed by the component. The server will still expect dates to be submitted in month/day/year format, unless you change the culture to one that uses day/month/year, for example en-GB. You can do that as shown below:
1. Load the culture script file after the other Kendo UI script files:
<script src="https://kendo.cdn.telerik.com/2021.3.1109/js/cultures/kendo.culture.en-GB.min.js"></script>2. Set the culture on the client:
<script>
kendo.culture("en-GB");
</script>3. And on the server, by modifying the web.config:
<system.web>
<globalization uiCulture="en-GB" culture="en-GB"></globalization>
</system.web>
Regards,
Ivan Danchev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron