daterangepicker的使用方法(汉化)

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"/>

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()
});

初始化之后会显示开始和结束之间的范围

``


版权声明:本文为weixin_50629071原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。