Opening second datepicker after selecting date

Question

I have two datepicker inputs and I'm trying to automatically open the second one after a date is selected in the first. As of now, the datebox opens and then promptly closes. I can do it just fine outside of my knockout.js viewmodel without the datebox closing, but the problem is I want the second datebox to open only if the first one has a valid date.

This works just fine outside of my viewmodel, as I mentioned above, however it doesn't account for any errors with the start date.

$("#start_date_input").datepicker('option',"onClose", function() { 
    $( "#start_date_input" ).datepicker( "show" ); 
});

This is where I'd like the second datepicker to be triggered

self.startDate.subscribe(function(){
    var startDateErrors = ko.validation.group(self.startDateValidation);
    var endDateErrors = ko.validation.group(self.endDateValidation);

    if(startDateErrors().length == 0 && endDateErrors().length == 0){
        populateList();
    }
    else if(startDateErrors().length == 0){ //if a valid start date is selected, show the end date
        $("#end_date_input").datepicker("show");
    }
});

As soon as I select a start date, the end date picker shows and immediately disappears. The cursor is still in the end date input box and flashing. Any idea what is causing it to close?

I tried adding $("end_date_input").datepicker({autoclose: false}); but that didn't do anything.

You got a missing `"` on `$("#end_date_input).datepicker("show");` — Robin Carlo Catacutan, Aug 19 '15 at 19:31

score 2 · Answer 1 · edited May 23 '17 at 10:28

Don't reach around the viewmodel and fiddle with the DOM directly. You need a custom binding handler for datepicker. There is one here that seems pretty popular. That by itself probably won't solve your problem, but it will put you in a better place to be in control of what's going on.

I suspect (but don't know) that having a hasFocus binding on the associated input field will show the datepicker properly.

Opening second datepicker after selecting date

1 Answers1