knockoutjsでブートストラップのdatepickerをバインドする

Question

ブートストラップのdatepickerを使用し、選択した日付をknockoutjsでバインドしたいと考えています。

日付ピッカーを使用する関数：ここ

$(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/

Answer 1

私は私のフィドルから http://jsfiddle.net/jearles/HLVfA/6/

機能するのに役立ちますフィドルが見つかりました：私もbootstrap-datepicker.jsを使用しますが、別の方法で

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

Answer 2

を：

私のViewModel：

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

そして、これが