Search code examples
javascripttwitter-bootstrapdatetimepickereonasdan-datetimepicker

bootstrap datetimepicker need to add keyBinds conditionally


I need to add the keyBinds for delete and enter button properties conditionally. I tried using the Object.assign() method, but not sure how to get hold of datetimepicker object associated with my input control, and how do I enable or disable keyBinds conditionally.

var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
    locale: 'en-US',
    format: 'DD-MM-YYYY',
    useCurrent: false,
    keepInvalid: true
});

Object.assign($inputCtrl.data("DateTimePicker"), bConditionalDeleteTest && {keyBinds: {'delete': null}});

if we initialize this object statically, it would be

$('.inputCtrl').datetimepicker({
    locale: 'en-US',
    format: 'DD-MM-YYYY',
    useCurrent: false,
    keepInvalid: true,
    keyBinds: {'delete': null} /*this would disable the default Delete key behavior of the control.*/
});

Solution

  • You can simply use keyBinds function.

    keyBinds()

    Returns a string variable with the currently set options.keyBinds option.

    keyBinds(object)

    Takes an object value.

    Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.

    You can have something like:

    var $inputCtrl = $('.inputCtrl');
    $inputCtrl.datetimepicker({
        locale: 'en-US',
        format: 'DD-MM-YYYY',
        useCurrent: false,
        keepInvalid: true
    });
    
    if( bConditionalDeleteTest ){
      $inputCtrl.data("DateTimePicker").keyBinds({'delete': null});
    }