Jquery Datepicker 在带有类的文本框中不起作用

Question

我有一个演示

Demo 1

var chosen=[]
var dates = $("#datepicker1, #datepicker2, #datepicker3, #datepicker4, #datepicker5, #datepicker6, #datepicker7").datepicker({
    minDate: "0",
    maxDate: "+2Y",
    defaultDate: "+1w",
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 1,
    beforeShowDay: function(date){
        var mmddyy=$.datepicker.formatDate(  'mm/dd/yy', date ),
            sameAs=$.inArray(mmddyy,chosen)
        console.log(mmddyy)
        if (sameAs>=0)
            return  [false, "nope","Same as "+(1+sameAs)]
        else
            return [true]
    },
    onSelect: function(date) {
        chosen=dates.map(function(){
            return this.value
        }).get()
        console.log(chosen)
        /*
        for(var i = 0; i < dates.length; ++i) {
            if(dates[i].id < this.id)
                $(dates[i]).datepicker('option', 'maxDate', date);
            else if(dates[i].id > this.id)
                $(dates[i]).datepicker('option', 'minDate', date);
        }
        */
    } 
});

使用 jquery timepicker 并符合我的要求，但问题是这个演示是基于 ID 的。当我转换成一个类并附加 btn 以便在单击按钮时生成文本框：

Demo 2

var chosen=[]
var dates = $(".txt_cls").datepicker({
    minDate: "0",
    maxDate: "+2Y",
    defaultDate: "+1w",
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 1,
    beforeShowDay: function(date){
        var mmddyy=$.datepicker.formatDate(  'mm/dd/yy', date ),
            sameAs=$.inArray(mmddyy,chosen)
        console.log(mmddyy)
        if (sameAs>=0)
            return  [false, "nope","Same as "+(1+sameAs)]
        else
            return [true]
    },
    onSelect: function(date) {
        chosen=dates.map(function(){
            return this.value
        }).get()
        console.log(chosen)
        /*
        for(var i = 0; i < dates.length; ++i) {
            if(dates[i].id < this.id)
                $(dates[i]).datepicker('option', 'maxDate', date);
            else if(dates[i].id > this.id)
                $(dates[i]).datepicker('option', 'minDate', date);
        }
        */
    } 
});

它不工作。如果有其他解决方案，请告诉我..

Answer 1

您需要添加 jquery 库和 jquery UI 库才能使其工作。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" ></script>

Working Demo

Answer 2

你错过了包含 jquery 和 jquery ui 添加以上 2 个库然后尝试

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script>
   var chosen=[]
   var dates = $(".txt_cls").datepicker({
       minDate: "0",
       ...
   });
</script>

var chosen=[]
var dates = $(".txt_cls").datepicker({
    minDate: "0",
    maxDate: "+2Y",
    defaultDate: "+1w",
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 1,
    beforeShowDay: function(date){
        var mmddyy=$.datepicker.formatDate(  'mm/dd/yy', date ),
            sameAs=$.inArray(mmddyy,chosen)
        console.log(mmddyy)
        if (sameAs>=0)
            return  [false, "nope","Same as "+(1+sameAs)]
        else
            return [true]
    },
    onSelect: function(date) {
        chosen=dates.map(function(){
            return this.value
        }).get()
        console.log(chosen)
        /*
        for(var i = 0; i < dates.length; ++i) {
            if(dates[i].id < this.id)
                $(dates[i]).datepicker('option', 'maxDate', date);
            else if(dates[i].id > this.id)
                $(dates[i]).datepicker('option', 'minDate', date);
        }
        */
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
Day 1 <input type="text" id="datepicker1" name="datepicker1" class="txt_cls" /> <br/>
Day 2 <input type="text" id="datepicker2" name="datepicker2" class="txt_cls"/>  <br/>
Day 3 <input type="text" id="datepicker3" name="datepicker3" class="txt_cls" /><br/>
Day 4 <input type="text" id="datepicker4" name="datepicker4" class="txt_cls" /><br/>
Day 5 <input type="text" id="datepicker5" name="datepicker5" class="txt_cls" /><br/>
Day 6 <input type="text" id="datepicker6" name="datepicker6" class="txt_cls" /><br/>
Day 7 <input type="text" id="datepicker7" name="datepicker7" class="txt_cls" /><br/>