如何使用jQuery获取Telerik RadDatePicker控件的日期值？

原代码问题说明 #

你的代码有两处直接导致取值失败的错误：

• jQuery ID选择器缺少前缀：ID选择器必须以#开头，你写的$('<%= RadDatePicker1.ClientID %>')会被识别为标签选择器，根本匹配不到任何DOM元素。
• 取值逻辑不符合RadDatePicker的渲染规则：RadDatePicker是复合控件，外层元素不是存储日期值的输入框，就算你选对外层元素，直接调用.val()也拿不到实际选中的日期。

修正方案 #

方案1：使用Telerik官方客户端API取值（推荐，兼容性最强） #

Telerik控件都提供了稳定的客户端对象API，通过ASP.NET AJAX的$find方法拿到控件实例后，直接调用内置方法就能拿到准确值，不受控件内部DOM结构变动影响：

function validateDates(sender, args) {
    // 获取RadDatePicker客户端实例
    var datePicker = $find("<%= RadDatePicker1.ClientID %>");
    // 获取选中的Date日期对象，未选择时返回null
    var selectedDate = datePicker.get_selectedDate();
    // 如果需要获取输入框显示的格式化字符串，可以用下面的代码
    // var dateDisplayText = datePicker.get_dateInput().get_value();

    alert(selectedDate ? selectedDate.toLocaleDateString() : "未选择日期");
    return true;
}

方案2：纯jQuery选择内部输入框取值 #

如果你坚持用jQuery方法，需要精准定位到控件内部实际承载值的input元素——RadDatePicker渲染后，带riTextBox样式类的input才是日期输入框：

function validateDates(sender, args) {
    // 注意ID选择器加#前缀，再查找内部的输入框元素
    var dateValue = $('#<%= RadDatePicker1.ClientID %> .riTextBox').val();
    alert(dateValue);
    return true;
}

注意：如果你的JS代码写在独立的.js外部文件中，<%= %>服务端表达式无法被解析，这种场景可以给RadDatePicker设置ClientIDMode="Static"固定客户端ID，直接用固定ID选择即可。

内容的提问来源于stack exchange，提问作者gene