Question

       <td class="col-lg-3">
           <select name="type_of_role" id="licence_exp_date" required="" class="form-control">
            <option value="manager">yyyy-MM-dd</option>
            <option value="supervisior">2016-05-12</option>

               <script>
                   $(function() {
                      $("#licence_exp_date").datepicker();
                          });
               </script>

          </select>

如何将datepicker应用于下拉列表？我试图申请，但它不起作用。

Answer 1

JQuery日期选择器不适用于下拉列表。它适用于任何基于文本的HTML输入标签。

$("<div>").text(message).appendTo("#chat")

如果您想使用JQuery日期选择器，我建议您使用

<input type="" >

Answer 2

日期必须去某处，所以我创建了两个<input>字段 - 一个用于datepicker，另一个用于非日期选择器，只是为了演示如何通过下拉列表触发datepicker。

jQuery代码监视下拉列表，如果选择了supervisor，它将{/ 1}}在附加了datepicker的字段上（触发弹出日历）

无论如何，这个例子向您展示了如何将datepicker应用于下拉列表中的一个选项。根据需要进行更改。

jsFiddle Demo

＆＃13;

focus()

＆＃13;

$("#licence_exp_date").datepicker();

$('#roleSelect').change(function(){
	//alert(this.value);
	if (this.value == 'supervisor'){
		$("#licence_exp_text").val('');
		$("#licence_exp_date").css({'z-index':'2'}).focus();
	}else{
		$("#licence_exp_date").css({'z-index':'0'}).val('');
		$("#licence_exp_text").focus();
	}
});

＆＃13;

#dateDIV {position:relative;margin:10px 0;}
#dateDIV>input{position:absolute;top:0;left:0;}
#licence_exp_text{z-index:1;border:1px solid orange;}
#licence_exp_date{z-index:0;background:wheat;border:1px solid #333;}

＆＃13;

如何将datepiker应用于dropdawn列表

2 个答案: