Detect change to selected date with bootstrap-datepicker

前端 未结 7 1534
一整个雨季
一整个雨季 2020-12-01 09:06

I have an input element with an attached datepicker created using bootstrap-datepicker.

7条回答
  •  渐次进展
    2020-12-01 09:13

    Based on Irvin Dominin example, I've created 2 examples supporting Paste and hit Enter.

    This works in Chrome: http://jsfiddle.net/lhernand/0a8woLev/

    $(document).ready(function() {
       $('#date-daily').datepicker({
          format: 'dd/mm/yyyy',
          assumeNearbyYear: true,
          autoclose: true,
          orientation: 'bottom right',
          todayHighlight: true,
          keyboardNavigation: false
        })
        /* On 'paste' -> loses focus, hide calendar and trigger 'change' */
        .on('paste', function(e) {
          $(this).blur();
          $('#date-daily').datepicker('hide');
        })
        /* On 'enter' keypress -> loses focus and trigger 'change' */
        .on('keydown', function(e) {
    
          if (e.which === 13) {
             console.log('enter');
             $(this).blur();
          }
        })
        .change(function(e) {
          console.log('change');
          $('#stdout').append($('#date-daily').val() + ' change\n');
        });
    });
    

    But not in IE, so I created another example for IE11: https://jsbin.com/timarum/14/edit?html,js,console,output

    $(document).ready(function() {
       $('#date-daily').datepicker({
          format: 'dd/mm/yyyy',
          assumeNearbyYear: true,
          autoclose: true,
          orientation: 'bottom right',
          todayHighlight: true,
          keyboardNavigation: false
        })
        // OnEnter -> lose focus
        .on('keydown', function(e) {
             if (e.which === 13){ 
               $(this).blur();
             }
        })
        // onPaste -> hide and lose focus
        .on('keyup', function(e) {
             if (e.which === 86){ 
                $(this).blur();
                $(this).datepicker('hide');
              }
        })
        .change(function(e) {
           $('#stdout').append($('#date-daily').val() + ' change\n');
        });
    });
    

    If last example still doesn't work in IE11, you can try splitting the setup:

    // DatePicker setup
    $('.datepicker').datepicker({
        format: 'dd/mm/yyyy',
        assumeNearbyYear: true,      /* manually-entered dates with two-digit years, such as '5/1/15', will be parsed as '2015', not '15' */
        autoclose: true,             /* close the datepicker immediately when a date is selected */
        orientation: 'bottom rigth',
        todayHighlight: true,        /* today appears with a blue box */
        keyboardNavigation: false    /* select date only onClick. when true, is too difficult free typing  */
    }); 
    

    And the event handlers: (note I'm not using $('.datepicker').datepicker({)

       // Smoker DataPicker behaviour
        $('#inputStoppedDate')
        // OnEnter -> lose focus
        .on('keydown', function (e) {
            if (e.which === 13){ 
                $(this).blur();
            }
        })
        // onPaste -> hide and lose focus
        .on('keyup', function (e) {
            if (e.which === 86){ 
                $(this).blur();
                $(this).datepicker('hide');
            }
        })
        .change(function (e) {
            // do saomething
        });
    

提交回复
热议问题