twitter bootstrap - बूटस्ट्रैप दिनांक रेंज पिकर दो श्रेणियों के साथ शुरुआत में एक खाली



twitter-bootstrap date (1)

मैं एक साधारण चार्ट बनाने के लिए पहली तारीख सीमा का उपयोग करके 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('');
});

क्या होता है कि दूसरी तारीख को रिक्त शुरू करना है, कोई चयन के बाद कोई तिथि नहीं दिखाएं


आपका दूसरा इनपुट रिक्त रहता है क्योंकि आपने उसमें कोई मान नहीं लगाया है

यह सबसे पहले एक मूल्य प्राप्त हो जाता है जिसे आप cb फ़ंक्शन कहते हैं, ताकि आप दूसरी पिकर के इनपुट के मूल्य को अपडेट करने के लिए एक समान विधि (मेरे उदाहरण में cb बना सकते हैं।

ध्यान दें कि daterangepicker फ़ंक्शन 2 पैरामीटर स्वीकार करता है, एक Object और कॉलबैक फ़ंक्शन, जैसा डॉक्स बताता है:

आप विकल्पों के साथ दिनांक रेंज पिकर को कस्टमाइज़ कर सकते हैं, और जब कॉलबैक फ़ंक्शन प्रदान करके उपयोगकर्ता नई तिथियां चुनता है तो अधिसूचित हो जाएंगे।

तो आप #reportrange-2 प्रारंभ करने के लिए cb2 कॉलबैक जोड़ सकते हैं

यहां एक काम करने वाला नमूना है:

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
}
<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>

संपादित करें:

आपकी टिप्पणी के बाद मैंने cancel.daterangepicker कर दिया है। cancel.daterangepicker कॉलबैक फ़ंक्शन, अब यह $(this).find('span').html(''); का उपयोग करके इनपुट को साफ़ करेगा। $(this).find('span').html(''); । यदि आपको इसकी आवश्यकता है तो आप पहले पिकर के लिए एक ही बात कर सकते हैं।





bootstrap-daterangepicker