minDate not being set in date picker

Question

This is how I am using date picker in my view:

<input type="text" class="form-control datepicker" name="ChartStartDate1" id="dailySummaryDt" data-bind="datePicker: targetDate, minDate: viewModel.datePickerMinDate()" />
<span id="temp" data-bind="text:viewModel.datePickerMinDate()"></span>  

The last line with span works perfectly. I created that span just to check if my model has correct value or not. But the date picker is not picking up that value, and I'm not sure why.

The minDate for date picker is not being set; in other words I am not able to set the minimum date for the date picker. Please note that the following works correctly:

minDate: new Date()  or
minDate:new Date('01/10/2015') 

This does not work. If I try to debug my binding handler the value for date is either undefined or invalid in all these cases:

minDate: new Date(viewModel.datePickerMinDate())  OR
minDate: viewModel.datePickerMinDate()  OR
minDate: viewModel.datePickerMinDate

Here is the code for my binding handler

ko.bindingHandlers.datePicker = {
    init: function (element, valueAccessor, allBindings) {
        var minDate = moment(allBindings.get('minDate') || ''),
            maxDate = moment(allBindings.get('maxDate') || ''),
            options = {
                minDate: minDate.isValid() ? minDate.toDate() : undefined,
                maxDate: maxDate.isValid() ? maxDate.toDate() : undefined,
                onClose: function () { if ($.fn.valid) $(this).valid(); },
                dateFormat: allBindings.get('format') || GGS.dateFormats.pickerDateFormat
            },
            dp = $(element).datepicker(options);
        console.log('minDate ' + minDate + '  ' + moment.utc($("#ChartStartDate").val()).format('MM/DD/YYYY'));
        dp.change(function () {
            var observable = valueAccessor(),
                unwrapped = ko.unwrap(observable)
                current = unwrapped ? moment.utc(unwrapped) : null,
                raw = dp.datepicker("getDate"),
                localValue = raw ? moment(raw) : null, //n.b. not UTC; stupid jQuery UI
                value = localValue ? moment.utc([localValue.year(), localValue.month(), localValue.date()]) : null //extract the date part to a UTC date
                if (!value || (!current || !current.isSame(value, 'day'))) {
                    console.log('value = ' + value.toDate());
                     observable(value ? value.toDate() : value);
                }
        });
    },
    update: function (element, valueAccessor) {
        var dp = $(element);
        var observable = valueAccessor(),
            unwrapped = ko.unwrap(observable),
            value = unwrapped ? moment.utc(unwrapped) : null,
            localValue = value ? moment([value.year(), value.month(), value.date()]) : null //make sure that jQuery UI shows the date we expect, rather than trying to convert to local time
        ;
        dp.datepicker("setDate", localValue ? localValue.toDate() : localValue);
        dp.blur();        
    },
}

Answer 1

Well as mentioned in comments you just have to do this

view:

<input type="text" class="form-control datepicker" data-bind="datePicker:targetDate, minDate:datePickerMinDate()" />
<span id="temp" data-bind="text:targetDate"></span> 

ViewModel:

var ViewModel = function () {
    var self = this;
    self.targetDate = ko.observable('01/10/2015');
    self.datePickerMinDate = ko.observable('01/10/2015');
};

//In bindingHandler update 

 update: function (element, valueAccessor) {

        var dp = $(element);
        var observable = valueAccessor(),
            unwrapped = ko.unwrap(observable)

          //here you have to format the Date before setting 
            $(element).datepicker("setDate", unwrapped);
        dp.blur();

    }

Working fiddle for reference here