Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  




           


Using JQuery DatePicker in Angular Ui-Grid
Had trouble using JQuery DatePicker in Angular Ui-Grid as the virtualization kept destroying the datepicker and causing null reference exceptions.

Solution was to init the datepicker on each 'onfocus' and open it, ensuring it's there no matter what. Also had to remove hasDatePicker class or it won't reinitialize.

HTML: (cellTemplate)

<input id='txtId' ng-focus="grid.appScope.ctrl.setDatePicker('txtId', true)" etc... (other input properties)

JS:
controller.setDatePicker = function (id, open) {
$('input[id="' + id + '"]').removeClass('hasDatepicker').datepicker();
if (open)
$('input[id="' + id + '"]').datepicker('show');
}

Be sure your ID is unique by binding to a unique string or something, I use 'txtId' here only as an example.

Created By: amos 10/22/2018 5:11:19 PM
Updated: 10/22/2018 5:12:11 PM