Hello,
Currently, when a user types in the date instead of using the popup, the textbox returns a red outline but it doesn't allow integrating with the built-in asp.net validators.
See the below image for a reference. It would be nice if this could also add a validation output.
I did try to use the Regular Expression and Custom Validators without success. When using them, I found that even when a correct date was input, it would throw an error.
See the following screenshot for reference to this.
Below is the code that I used.
<telerik:RadMonthYearPicker EnableAriaSupport="true" EnableKeyboardNavigation="true" ID="from_date" name="from_date" runat="server" RenderMode="Lightweight"
Width="150px" ToolTip="" Height="40px">
<DateInput ID="fd_input" DateFormat="MM/yyyy" runat="server" Enabled="true">
</DateInput>
</telerik:RadMonthYearPicker>
<asp:RequiredFieldValidator runat="server" id="v_from_date" ControlToValidate="from_date" ErrorMessage="- Required" CssClass="validator" />
<asp:RegularExpressionValidator ID="reg_v_from_date" runat="server" ErrorMessage="Invalid From Date" ControlToValidate="from_date" Text="Format: MM/YYYY" ValidationExpression="^\d{4}-\d{2}-\d{2}$" CssClass="validator"></asp:RegularExpressionValidator>
Hi Matthew,
Thank you for providing the feature request. As promised during our support exchange, I will provide a custom workaround that can help with the current limitations.
If allowing typed input is required, the best option would be to use custom validation on the client-side to check on which input type is used and then validate the input value.
This is because the PopUp will return a Date object and typing in the DateInput will return a string. See the following code snippet for a reference with comments.
<script type="text/javascript">
function OnValueChanging(sender, args) {
// Validate the "newValue" using Regex or any other means.
// If this is valid it will return a date object type
// When valid just fall through and let it select.
var inputValue = args.get_newValue();
// Assume is true for input value from popup
var ValidDateType = inputValue instanceof Date;
// If it's an invalid date type
if (ValidDateType == false) {
// Validate against REGEX
var IsValidDate = new RegExp('^((0[1-9])|(1[0-2]))\/(\d{4})$\/gm').test(inputValue);
//
if (IsValidDate === false) {
// Cancel the event (optional)
// This will revert the value
//args.set_cancel(true);
// Set invalid flag for the control
sender.set_invalid(true);
// Implement some more lines of code that will handle additional tasks
DisplayVadlidity(true, inputValue);
} else {
DisplayVadlidity(false);
}
} else {
DisplayVadlidity(false);
}
}
function DisplayVadlidity(bool, dateValue) {
if (bool) {
var lbl = document.getElementById('<%= Label1.ClientID %>');
lbl.innerText = "The value \"" + dateValue + "\" has an incorrect format.\nValue must have the format of \"MM/yyyy\".";
} else {
var lbl = document.getElementById('<%= Label1.ClientID %>');
lbl.innerText = "";
}
}
</script>
<div>
<telerik:RadMonthYearPicker EnableAriaSupport="true" EnableKeyboardNavigation="true" ID="from_date"
runat="server"
Width="150px" ToolTip="" Height="40px">
<DateInput ID="fd_input" DateFormat="MM/yyyy" runat="server" Enabled="true">
<ClientEvents OnValueChanging="OnValueChanging" />
</DateInput>
</telerik:RadMonthYearPicker>
<br />
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
</div>Alternatively, it is also possible to disable typed input by setting the EnableTyping property to false. However, this may not be useful for accessibility standards.
Please let me know if you need any additional information. Thank you for choosing UI for ASP.NET AJAX.
Regards,
Eric R | Senior Technical Support Engineer
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.