美文网首页让前端飞
jquery日期选择插件date-range-picker

jquery日期选择插件date-range-picker

作者: Adoins | 来源:发表于2018-11-16 21:30 被阅读0次
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
                <form id="taskForm">
                    <div class="export-container">
                        <div class="export-item">
                            <label>选择消息日期范围</label>
                            <div class="daterange">
                                <input class="input-item" name="range_date" type="text">
                                <i class="fa fa-calendar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="cancel jq_modal_close">取消</div>
                        <input id="createTaskBtn" type="submit" class="confirm" value="确定">
                    </div>
                </form>
      // 导出监测信息弹窗,选择日期
      var startDate = "2018-09-01";
      var endDate = "2018-10-01";
      $(".daterange input").each(function () {
        var $this = $(this);

        $this.daterangepicker({
          startDate: "2018-09-01",
          endDate: "2018-10-01",
          locale: {
            "format": "YYYY-MM-DD", // 显示格式
            "separator": " ~ ", // 两个日期之间的分割线
            // 中文化
            "applyLabel": "确定",
            "cancelLabel": "取消",
            "fromLabel": "开始",
            "toLabel": "结束",
            "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
            "monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            "firstDay": 1
          },
        }, function (start, end, label) {
          startDate = start.format("YYYY-MM-DD");
          endDate = end.format("YYYY-MM-DD");

          // 设置最小宽度,否则显示不全
        }).css("min-width", "210px").next("i").click(function () {
          // 对日期的i标签增加click事件,使其在鼠标点击时可以拉出日期选择
          $(this).parent().find('input').click();
        });
      });

相关文章

网友评论

    本文标题:jquery日期选择插件date-range-picker

    本文链接:https://www.haomeiwen.com/subject/bwsvfqtx.html