Powiąż datepicker datepicker z knockoutjs

Question

Chcę użyć datepicker bootstrap i powiązać wybraną datę z knockoutjs.

funkcja, która używa 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()); 
    } 

}); 

Oto skrzypce że chcę używać, ale nie jest pewien, jak się za to zabrać. http://jsfiddle.net/zNbUT/276/

Answer 1

znalazłem skrzypce że pomoże mi http://jsfiddle.net/jearles/HLVfA/6/

funkcjonalność z skrzypce:

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

użyłem również bootstrap-datepicker.js ale w inny sposób:

My ViewModel:

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

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

I JS, aby funkcjonować:

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

I to działa idealnie dla mnie