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

您需要检查以下内容：

首先检查您是否添加了适当版本的jquery。
添加jquery后，检查您是否已添加日期选择器插件。
然后您需要添加初始化日期选择器插件的代码。

如果一切正常，请检查您是否已在$.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

试用此代码

＆＃13;

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]);

＆＃13;

#target {
  margin: 2em;
}

＆＃13;

<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>

＆＃13;

日期选择器不起作用

2 个答案: