How to Pass a Date from observable to JQuery datepicker

Question

In my application, I have an observable that contains a minimum date for the jquery datepicker. Problem is that I do not know how to get that date from the javascript viewmodel code to a jQuery bindingHandlers for the jQuery datepicker. Here is the code-

 define(['services/logger', 'durandal/system', 'plugins/router'],
function (logger, system, router) {

             //GetLucasSystemDate() returns a date
             var LucasSystemDate = ko.observable(GetLucasSystemDate());

                  ko.bindingHandlers.datepicker = {
// add event handler to handle change in the datepicker element and update the viewmodel
init: function (element, valueAccessor, allBindingsAccessor) {
   var options = allBindingsAccessor().datepickerOptions || {};


              $(element).datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: false,
                minDate: LucasSystemDate()
            });
 }
});

Look for LucasSystemDate in the above jQuery code section. Obviously that does not work, but does illistrate what I am trying to do. How can I get the LucasSystemDate observable value to minDate?

EDIT: As Josh suggested, I moved my code into scope with the rest of the javascript. Then I was able to refer to the observableArray. I edited the code above-

Answer 1

The problem looks like it is with scope. Without seeing all the JavaScript and the entire ViewModel it is hard to say... but is there a specific reason you are setting up the bindingHandler outside of the jQuery closure? Everything inside of there is going to be closed off from the rest of your JavaScript. Is it possible to move your binding handler inside of there, and then move your observable outside of the function so that they are in the same scope? It seems weird to me that you have an observable declaration inside of a function that is not going to be your ViewModel.

Answer 2

All you have to do in your situation is create a binding on whatever element you are using that is called datepickerOptions

 <input data-bind="datepicker: thisDateObservable, datepickerOptions: { minDate: new Date(LucasSystemDate) }" />

Also you are initializing the datepicker twice in your code - if you are passing in options from the element you don't need the first $(element).datepicker({}) only the second one where you are passing in options.