日期選擇器不工作

Question

我目前指的是this的例子。我已經下載了一切，但我的jQuery不工作。

我的HTML代碼

<div class="control-group"> 
    <label class="control-label" for="input17">Date:</label>               
    <div class="controls"> 
    <input name="date" id="date" type="text" class="input-medium" placeholder="Date"> 
    <a class="btn" href="#"><i class="fa fa-calendar"></i></a>                
    <div id="error_date"></div>        
    </div> 
    </div> 

我jQuery是這個。

 var nowTemp = new Date(); 
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

var checkin = $('#date').datepicker({ 
    onRender: function(date) { 
    return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
    } 
}).on('changeDate', function(ev) { 
    if (ev.date.valueOf() > checkout.date.valueOf()) { 
    var newDate = new Date(ev.date) 
    newDate.setDate(newDate.getDate() + 1); 
    checkout.setValue(newDate); 
    } 
    checkin.hide(); 

}).on('changeDate', function(ev) { 
    checkout.hide(); 
}).data('datepicker'); 

請大家幫忙。

Answer 1

您需要檢查以下內容：

1. 首先檢查您已經添加的jQuery的相應版本。
2. 檢查您是否在添加jquery後添加了日期選擇器插件。
3. 然後你需要添加你的代碼，它會初始化你的日期選擇器插件。

如果一切正常，然後檢查您是否在$.ready()中綁定了您的代碼。如果不是這樣，那麼在$.ready中綁定代碼，以便在DOM的每個元素準備就緒後，您的插件初始化工作。

$(function() { 
 
    var nowTemp = new Date(); 
 
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 
 

 
    var checkin = $('#date').datepicker({ 
 
    onRender: function(date) { 
 
     return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
 
    } 
 
    }).on('changeDate', function(ev) { 
 
    if (ev.date.valueOf() > checkout.date.valueOf()) { 
 
     var newDate = new Date(ev.date) 
 
     newDate.setDate(newDate.getDate() + 1); 
 
     checkout.setValue(newDate); 
 
    } 
 
    checkin.hide(); 
 

 
    }).on('changeDate', function(ev) { 
 
    checkout.hide(); 
 
    }).data('datepicker'); 
 
});

<link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" /> 
 
<link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
 

 

 

 
<div class="control-group"> 
 
    <label class="control-label" for="input17">Date:</label> 
 
    <div class="controls"> 
 
    <input name="date" id="date" type="text" class="input-medium" placeholder="Date"> 
 
    <a class="btn" href="#"><i class="fa fa-calendar"></i></a> 
 
    <div id="error_date"></div> 
 
    </div> 
 
</div>

Answer 2

試試這個代碼

ko.bindingHandlers.datepicker = { 
 
    init: function(element, valueAccessor, allBindingsAccessor) { 
 
     //initialize datepicker with some optional options 
 
     var options = allBindingsAccessor().datepickerOptions || {}; 
 
     $(element).datepicker(options); 
 
     
 
     //when a user changes the date, update the view model 
 
     ko.utils.registerEventHandler(element, "changeDate", function(event) { 
 
      var value = valueAccessor(); 
 
      if (ko.isObservable(value)) { 
 
       value(event.date); 
 
      }     
 
     }); 
 
    }, 
 
    update: function(element, valueAccessor) { 
 
     var widget = $(element).data("datepicker"); 
 
     //when the view model is updated, update the widget 
 
     if (widget) { 
 
      widget.date = ko.utils.unwrapObservable(valueAccessor()); 
 
      widget.setValue();    
 
     } 
 
    } 
 
}; 
 

 
var model = { 
 
    test_date: ko.observable(new Date('2012/12/12')) 
 
}; 
 

 
ko.applyBindings(model, $("#target")[0]);

#target { 
 
    margin: 2em; 
 
}

<link href="https://rawgithub.com/Aymkdn/Datepicker-for-Bootstrap/master/datepicker.css" rel="stylesheet"/> 
 
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script> 
 
<script src="https://rawgithub.com/Aymkdn/Datepicker-for-Bootstrap/master/bootstrap-datepicker.js"></script> 
 

 
<div id='target'> 
 
    <input data-bind='datepicker: test_date'/> 
 
    
 
    <div data-bind="text: test_date"></div> 
 
    
 
    <input data-bind='datepicker: test_date'/> 
 
</div>