0
<input type="text" id="datepickerId" class="form-control datepicker" placeholder="Select date" required name="StartDate" server-validate="parameters.Start"
    uib-datepicker-popup="yyyy/MM/dd"
    ng-model="variableName"
    datepicker-options="dateOptions"
    show-button-bar="false"
    datepicker-popup-template-url="templateUrl"
    is-open="isDatePickerOpen"
    ng-click="isDatePickerOpen=!isDatePickerOpen">

This is the HTML markup for the datepicker I'm using. When I select date from pop-up, the pop-up should close but this is not working. When I add datepicker-append-to-body="true" attribute, it works but without this attribute, datepicker pop-up doesn't close after date is selected. I don't want to specify this attribute as I'm displaying datepicker in a modal and I don't want datepicker to scroll with body when modal is open.

I tried solutions like adding an eventListener for changeDate,

$("#datepickerId").datepicker().on('changeDate',function(){  $(this).datepicker('hide');  });

But this is not working, it is not listening to the event. I also tried something like this,

$("#datepickerId").datepicker({
    onSelect: function() {
        $("#modalId").focus();
    }
});

But this also doesn't seem to work. Setting autoclose property true isn't working either.

Can someone please help? I tried couple of solutions but they aren't working.

Swap
  • 189
  • 1
  • 1
  • 13
  • try `ng-click="isDatePickerOpen=true"` – Pradeepb Oct 06 '16 at 22:42
  • @Pradeepb If I make isDatePickerOpen=true, pop-up wont disappear if I click on input field. Also, it doesn't solve the problem of pop-up not disappearing on date selection. – Swap Oct 06 '16 at 23:03
  • ok. try the following. `ng-click="open()"` and in controller add the the function. `$scope.open = function() { $scope.isDatePickerOpen = true; };` – Pradeepb Oct 07 '16 at 08:16

0 Answers0