使用 JQuery 按类名选择剑道日期选择器

Question

如何通过类名获取 Kendo Date Picker 的值。原因是因为我将 name 和 id 属性用于其他用途。正如您在下面看到的，类属性是动态的。每隔一次我选择一个剑道日期选择器，我总是使用 ID 属性。是否可以按类属性选择？

 @Html.Kendo().DatePicker()
              .Name("SurveyResponse.DateRes[" + @guid + "].Date")
              .Format("MM/dd/yyyy")
              .HtmlAttributes(new { 
                       onkeydown = "javascript:return false;", 
                       onblur = "ConditionalTextBox(" + @item.SurveyQuestionID + ",'datecontrol')", 
                       @placeholder = "Your answer", 
                       @required = "required", 
                       @class = "IsConditionalTextBox_" + @item.SurveyQuestionID 
                       })

Answer 1

我为你准备了一个快速道场，展示了如何使用 id、class 和 data 属性访问值/控件

http://dojo.telerik.com/udIfO

如果您想使用数据属性方法（我的首选），那么只需使用 @data_My_Attribute 将其添加到您的 htmlAttributes 中，这将转换为 data-My-Attribute

但为了完整起见，这里是供您查看的示例：

        <h4>Show e-mails from:</h4>
        <input id="datepicker" value="10/10/2011" style="width: 100%" class="dateClass" data-my-attribute="date" />

        <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
        <input id="monthpicker" value="November 2011" style="width: 100%" class="monthClass" data-my-attribute="month" />
      <button class="k-button k-primary" type="button">See results</button>
      <br/>
      <div>
     <br/>
      <div id="results">
      </div>

      </div>
    </div>
<script>
    $(document).ready(function() {
        // create DatePicker from input HTML element
        $("#datepicker").kendoDatePicker();

        $("#monthpicker").kendoDatePicker({
            // defines the start view
            start: "year",

            // defines when the calendar should return date
            depth: "year",

            // display month and year in the input
            format: "MMMM yyyy"
        });

      $('button.k-button').on('click', function(){
        var model = ''; 
         model = model +  'From <strong>#datepicker</strong> using id as selector::' + $("#datepicker").data('kendoDatePicker').value();
         model += '<br/>From <strong>#monthpicker</strong> using id as selector::' + $("#monthpicker").data('kendoDatePicker').value();
         model = model +  '<br/>From <strong>#datepicker</strong> using input.dateClass as selector::' + $("input.dateClass").data('kendoDatePicker').value();
         model += '<br/>From <strong>#monthpicker</strong> using input.monthClass as selector::' + $("input.monthClass").data('kendoDatePicker').value();
         model = model +  '<br/>From <strong>#datepicker</strong> using input[data-my-attribute="date"] as selector::' + $("input[data-my-attribute='date']").data('kendoDatePicker').value();
         model += '<br/>From <strong>#monthpicker</strong> using input[data-my-attribute="month"] as selector::' + $("input[data-my-attribute='month']").data('kendoDatePicker').value();
        $('#results').empty().html(model);
      }); 

    });
</script>
</div>