Question

如何通过选中复选框来显示/打开daterangepicker日历？我有一个复选框＆＃34;显示日历＆＃34;。我想通过选中复选框打开/显示daterangepicker。当您单击输入字段时，它将具有相同的功能。

<div class="checkbox icheckbox_flat-aero">
  <label class="icheckbox_flat-aero">
    <input id="check_tempFilter" type="checkbox" value="tempFilter" style="text-align:right;">(activate)</label>
  <div id="d22" class="col-sm-4 col-md-offset-2 input-group">
    <input type="text" class="form-control" id="daterange" name="daterange" />
  </div>
</div>

是否有类似的东西：

$('daterange').show();

我已经将daterangepicker绑定到我的inputfield＆＃34; daterange＆＃34;。复选框单击应该只打开/显示已存在的daterangepicker。

$('input[name="daterange"]').daterangepicker({

    startDate: moment().subtract('days', 6),
        endDate: moment(),

        timePicker: true,         
        timePicker24Hour: true,
        timePickerSeconds:true,
        timePickerIncrement: 1,
        showDropdowns: true,

        locale: {       
            format: 'YYYY-MM-DD H:mm'               
        }
 });

感谢任何帮助

Answer 1

$(function() {
  $('#check_tempFilter').click(function() {
    var $this = $(this);
    if (!$this.is(':checked')) {
      $this.daterangepicker();
    }
  });
  $('#check_tempFilter').daterangepicker();
});

Demo

Answer 2

您可以在单击其他元素时将焦点设置为输入字段。这将在正确的位置打开日期范围选择器，例如我在输入字段后面有一个日历图标，它应该触发日期范围对话框。 $ name代表输入字段的名称：

    $('#calicon_$name').on('click',function(){
        $('input[name="fpara_$name"]').focus();
    });

在jQuery中按钮或复选框打开/显示daterangepicker引导程序

2 个答案: