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

使用JQuery按类名选择剑道日期选择器,jquery,asp.net-mvc,kendo-ui,kendo-asp.net-mvc,Jquery,Asp.net Mvc,Kendo Ui,Kendo Asp.net Mvc,如何通过类名获取剑道日期选择器的值。原因是我在使用name和id属性做其他事情。正如您在下面看到的,class属性是动态的。每当我选择剑道日期选择器时,我总是使用ID属性。是否可以按类属性进行选择 @Html.Kendo().DatePicker() .Name("SurveyResponse.DateRes[" + @guid + "].Date") .Format("MM/dd/yyyy") .HtmlAt

如何通过类名获取剑道日期选择器的值。原因是我在使用name和id属性做其他事情。正如您在下面看到的,class属性是动态的。每当我选择剑道日期选择器时,我总是使用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 
                       })

我已经为您准备了一个快速的dojo,展示了如何使用id、class和data属性访问值/控件

如果您想使用data attribute方法my preferred,那么只需使用@data\u my\u 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>