Question

如何按类名获取Kendo Date Picker的值。原因是因为我使用name和id属性来做别的事情。如下所示，class属性是动态的。我每隔一次选择一个Kendo Date Picker，我总是使用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>

使用JQuery按类名选择Kendo Date Picker

1 个答案: