New Feature: closeButton

[jnorvell]

When in date + time mode, the user needs the ability to make multiple selections. When they are finished there is no way to dismiss the non-inline calendar, aside from clicking outside the calendar popup. This is OK for desktops, but in a mobile app with a small screen, there could be other form controls behind the calendar popup, and this causes bad experience for the user.

Would be nice to have a new , optional closeButton: 'true' property that would create a close button and allow the user the ability to manually close when they are ready.

[mrtoddandrews]

This is a needed UX feature for the multiple date selector also - so the user can close the datepicker when they are done selecting the dates they require.

[erniomaldo]

Hi there, i figure out to make that posible:

Here is the JS:

$(selector).datepicker({
   language: 'en'),
   timepicker: true,
   position: 'bottom center',
   onShow: function (dp, animationCompleted) {
      if (!animationCompleted) {
         if (dp.$datepicker.find('button').html()===undefined) { /*ONLY when button don't existis*/
            dp.$datepicker.append('<button type="button" class="uk-button uk-button-default uk-button-small uk-width-1-1 uk-margin-small-bottom" disabled="disabled"><i class="fas fa-check"></i> Ready</button>');
            dp.$datepicker.find('button').click(function(event) {
               dp.hide();
            });
         }
      }
   },
   onSelect: function (formattedDate, date, dp) {
      if (formattedDate.length>0) {
         dp.$datepicker.find('button').prop('disabled', false).removeClass('uk-button-default').addClass('uk-button-primary');
      } else {
         dp.$datepicker.find('button').prop('disabled', true).removeClass('uk-button-primary').addClass('uk-button-default');
      }
   }
});

And here is the CSS(not required):

#datepickers-container .-selected- {
   background: #EF984C;
   color: #fff !important;
}#datepickers-container .-current- {
   color: #EF984C;
}
#datepickers-container .datepicker--time-sliders > *:not(:first-child) {
   margin-top: 9px;
   margin-bottom: 6px;
}#datepickers-container .datepicker--time-sliders > *:first-child {
   margin-top: 6px;
}
#datepickers-container input[type=range]::-webkit-slider-thumb {
   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   border: 0px;
   height: 22px;
   width: 22px;
   border-radius: 5px;
   background: #EF984Cee;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -11px;
}

[Void0000]

Now tell please how make same button but in two-inputs range picker?