將knockoutjs與bootstrap datepicker綁定

我想使用bootstrap datepicker並將選定日期與knockoutjs綁定。將knockoutjs與bootstrap datepicker綁定

使用的日期選擇器功能：

$(function() { 

    // create the departure date 
    $('#depart-date').datepicker({ 
     autoclose: true, 
     format: 'yyyy/mm/dd', 
    }).on('changeDate', function(ev) { 
     ConfigureReturnDate(); 
    }); 


    $('#return-date').datepicker({ 
     autoclose: true, 
     format: 'yyyy/mm/dd', 
     startDate: $('#depart-date').val() 
    }); 

    // Set the min date on page load 
    ConfigureReturnDate(); 

    // Resets the min date of the return date 
    function ConfigureReturnDate() { 
     $('#return-date').datepicker('setStartDate', $('#depart-date').val()); 
    } 

});

這裏是我想用，但不知道如何去這樣做小提琴。 http://jsfiddle.net/zNbUT/276/

來源

2013-01-19 Gericke

發現了另一種解決這個問題。 http://stackoverflow.com/questions/14782728/object-object-object-has-no-method-when-using-bootstrap-datepicker – Gericke

我發現了一個小提琴，這將有助於我從小提琴 http://jsfiddle.net/jearles/HLVfA/6/

功能：

ko.bindingHandlers.datepicker = { 
     init: function (element, valueAccessor, allBindingsAccessor) { 
      //initialize datepicker with some optional options 
      var options = allBindingsAccessor().datepickerOptions || {}; 
      $(element).datepicker(options).on("changeDate", function (ev) { 
       var observable = valueAccessor(); 
       observable(ev.date); 
      }); 
     }, 
     update: function (element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      $(element).datepicker("setValue", value); 
     } 
    };

來源

2013-01-19 20:08:52 Gericke

僅供參考：我的小提琴已更新爲使用不同版本的'bootstrap-datepicker。 js'。 http://jsfiddle.net/jearles/HLVfA/6/ –

這可能有點晚，但我已經更新了小提琴使用最新（和正確）的鏈接引導和datepicker的CSS：http：// jsfiddle達網絡/ HLVfA/112 / –

我也用bootstrap-datepicker.js但以不同的方式：

我的視圖模型：

var MyDataViewModel = { 
    //Set Todays Date 
    StartDate: ko.observable(new Date()) 
}

我的HTML：

<div id="dtpDate" class="input-append"> 
    <input required="required" id="txtdtpDate" data-format="yyyy-MM-dd" type="text" style="width: 75%;" /> 
    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
    </span> 
</div>

而且JS，使其功能：

$(function() { 
    $('#dtpDate').datetimepicker({ 
     pickTime: false 
     }) 
     .on('changeDate', function (ev) { 
      //Date.Subtring(1,10) for formatting purposes 
      MyDataViewModel.StartDate(ko.toJSON(ev.date).substr(1, 10)); 
     }); 
    }); 
});

這完全適用於我

來源

2013-08-26 14:41:39

將knockoutjs與bootstrap datepicker綁定

回答

相關問題