1

Bootstrap DateRangePicker Jquery プラグインを使用していましたが、手動入力の問題に対処するために、日付フィールドを読み取り専用にし、作成された範囲を使用して、ユーザーが必要なものを選択できるようにしました。このようなもの..

// set datepicker
    function cb(start, end) {
            $('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY'));
    }
   
    $('#daterange').daterangepicker({
        autoApply: true,
        autoUpdateInput:true, 
        ranges: [
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'This Week': [moment().startOf('week'), moment()],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

問題は、フィールドが読み取り専用であり、日付ピッカーのインターフェイスにそれを行うためのボタンがない場合、フィールドの内容をどのようにクリアするかです。

dararange picker の公式 Web サイトでは、「キャンセル」ボタンをクリックすると、日付フィールドをクリアするイベントを添付できるというわずかな解決策が提供されています。

$('#daterange').daterangepicker({
locale: { cancelLabel: 'Clear' }
});  
$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
  //do something, like clearing an input
  $('#daterange').val('');
});

しかし、それは私が意図していることではありません。Clear と Cancel の両方と有効なアクション。では、どうすればいいのでしょうか。

4

1 に答える 1

2

これが私が行った方法です。既存の範囲の上部に「なし」という範囲を追加しました。これをクリックすると、フィールドがクリアされます。範囲に渡される値は 2 つの null 値であり、cb関数 (またはフィールドを操作するために使用する関数) で、渡された日付が有効かどうかを確認し、失敗するとフィールドをクリアします (無効は Null があったことを意味します)合格したか、[なし] をクリックしました)。

<script>
// set datepicker
    function cb(start, end) {
        if(start._isValid && end._isValid)
        {
            $('#daterange input').val(start.format('Do MMM YYYY') + ' - ' + end.format('Do MMM YYYY'));
        }
        else
        {
            $('#daterange input').val('');
        }
    }

    $('#daterange').daterangepicker({
        autoApply: true,
        autoUpdateInput:true, 
        ranges: {
            'None': [null,null],
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'This Week': [moment().startOf('week'), moment()],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);
</script>
于 2016-04-01T05:22:52.307 に答える