daterangepicker的使用方法（漢化）

1、引入js和css檔案

<script type="text/javascript" src="/qlc/static/css/ace/js/date-time/moment.js"></script>
    <script type="text/javascript" src="/qlc/static/js/My97DatePicker/lang/zh-cn.js"></script>
    <script type="text/javascript" src="/qlc/static/css/ace/js/date-time/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="/qlc/static/css/ace/css/daterangepicker.css" target="_blank" rel="external nofollow" />
           

2、初始化元件

.daterangepicker{display: none}/*不要删，時間範圍選擇器必用*/
           

<input name="dates" type="text" style="width: 230px;height: 14px;color: #1A1A1A;font-size: 16px;font-weight: 400;">
           

$('input[name="dates"]').daterangepicker({
        "startDate": moment().add('month',-5),//設定預設開始日期（五個月之前）
        "endDate": moment(),//結束日期為今天
        "maxDate": moment(),//最大可選擇日期為今天
        "linkedCalendars": false,//設定false為兩個月曆單獨進行，互不影響
        "autoUpdateInput": true,
        "locale": {//漢化
            format: "YYYY-MM-DD",
            separator:" 至 ",
            applyLabel: "應用",
            cancelLabel: "取消",
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'],
        }
});
           

$('input[name="dates"]').on('apply.daterangepicker', function(ev, picker) {//點選應用時觸發
        $(this).val(picker.startDate.format('YYYY-MM-DD') +' 至 '+picker.endDate.format('YYYY-MM-DD'));
});
$('input[name="dates"]').on('cancel.daterangepicker', function(ev, picker) {//點選取消時重新加載頁面
      // $(this).val('');
      location.reload()
});
           

``