Bootstrap Date Range Picker有两个范围，一开始是空的

时间：2017-03-16 16:32:38

标签： twitter-bootstrap date datepicker bootstrap-daterangepicker

我正在尝试使用第一个日期范围构建一个包含2个范围的仪表板来构建一个简单的图表，并使用第二个日期范围来比较第一个日期范围。

第一个工作正常，但我遇到问题，需要建立第二个必须开始为空并且能够选择范围或清除日期。

我的HTML是：

<div id="reportrange-1" class="dates pull-right">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>

我的剧本：

var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');

var _reportCompareToDateStart;
var _reportCompareToDateEnd;

moment.locale('pt');

var start = moment().subtract(6, 'days');
var end = moment();

function cb(start, end) {
    $('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$('#reportrange-1').daterangepicker({
    locale: {
        format: 'DD-MM-YYYY'
    },
    startDate: start,
    endDate: end,
    ranges: {
        'Hoje': [moment(), moment()],
        'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
        'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
        'Este Mês': [moment().startOf('month'), moment().endOf('month')],
        'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

$('#reportrange-2').daterangepicker({
    autoUpdateInput: false,
    locale: {
        format: 'DD-MM-YYYY',
        cancelLabel: 'Limpar'
    },
    ranges: {
        'Hoje': [moment(), moment()],
        'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
        'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
        'Este Mês': [moment().startOf('month'), moment().endOf('month')],
        'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
});

cb(start, end);

$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
    _reportDateStart = picker.startDate.format('YYYY-MM-DD');
    _reportDateEnd = picker.endDate.format('YYYY-MM-DD');

    _loadChart();
});

$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
    _reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
    _reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');

    _loadChart();
});

$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
    $(this).val('');
});

如果第二个日期必须开始为空，请在选择后不显示任何日期。

enter image description here

1 个答案:

答案 0 :(得分：3)

您的第二个输入仍为空，因为您从未在其中设置值。

首先得到一个值，因为你调用cb函数，所以你可以创建一个类似的方法（在我的例子中为cb2）来更新第二个选择器的输入值。 / p>

请注意，daterangepicker函数接受2个参数，一个选项Object和一个回调函数，作为docs个状态：

  

您可以使用选项自定义日期范围选择器，并在用户通过提供回调函数选择新日期时收到通知。

因此，您可以将cb2回调添加到#reportrange-2初始化。

这是一份工作样本：

＆＃13;
＆＃13; 
var _reportDateStart = moment().subtract(6, 'days').format('YYYY-MM-DD');
var _reportDateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');

var _reportCompareToDateStart;
var _reportCompareToDateEnd;

moment.locale('pt');

var start = moment().subtract(6, 'days');
var end = moment();

function cb(start, end) {
  $('#reportrange-1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

function cb2(start, end) {
  $('#reportrange-2 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$('#reportrange-1').daterangepicker({
  locale: {
    format: 'DD-MM-YYYY'
  },
  startDate: start,
  endDate: end,
  ranges: {
    'Hoje': [moment(), moment()],
    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
    'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
    'Este Mês': [moment().startOf('month'), moment().endOf('month')],
    'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
}, cb);

$('#reportrange-2').daterangepicker({
  autoUpdateInput: false,
  locale: {
      format: 'DD-MM-YYYY',
      cancelLabel: 'Limpar'
  },
  ranges: {
    'Hoje': [moment(), moment()],
    'Ontem': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Últimos 7 Dias': [moment().subtract(6, 'days'), moment()],
    'Últimos 30 Dias': [moment().subtract(29, 'days'), moment()],
    'Este Mês': [moment().startOf('month'), moment().endOf('month')],
    'Último Mês': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  }
}, cb2);

cb(start, end);

$('#reportrange-1').on('apply.daterangepicker', function (ev, picker) {
  _reportDateStart = picker.startDate.format('YYYY-MM-DD');
  _reportDateEnd = picker.endDate.format('YYYY-MM-DD');

  _loadChart();
});

$('#reportrange-2').on('apply.daterangepicker', function (ev, picker) {
  _reportCompareToDateStart = picker.startDate.format('YYYY-MM-DD');
  _reportCompareToDateEnd = picker.endDate.format('YYYY-MM-DD');

  _loadChart();
});

$('#reportrange-2').on('cancel.daterangepicker', function (ev, picker) {
  // Clear current input
  // you can use this or the component id 
  $(this).find('span').html('');
  //$('#reportrange-2 span').html('');
});

function _loadChart(){
  // _loadChart
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/locale/pt.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<div id="reportrange-1" class="dates pull-right">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>
<div id="reportrange-2" class="dates pull-right date-compare">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
        <span></span> <b class="caret"></b>
</div>
＆＃13;
＆＃13;
＆＃13;

修改

我在评论后更改了cancel.daterangepicker回调函数，现在它将使用$(this).find('span').html('');清除输入。如果你需要，你可以为第一个选择器做同样的事情。

相关问题
最新问题