Angular6使用时间日期控件daterangepicker

最新推荐文章于 2024-08-22 09:20:35 发布

kksw1121

最新推荐文章于 2024-08-22 09:20:35 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： angular angular6 daterangepicker

本文链接：https://blog.youkuaiyun.com/qq_43225030/article/details/84973086

本文介绍如何在Angular6项目中使用daterangepicker插件，包括引入jQuery，存放相关文件的位置，以及在angular.json配置文件中的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面展示效果图如下：
在这里插入图片描述

1.该插件需要引入jquery

npm install jquery --save

2.需要将以下三个文件放在assets文件夹下
在这里插入图片描述

3.在angular.json文件中添加如下配置
在这里插入图片描述
4.html

<input type="text" id="timeInput"  style="width:200px;height:28px;" />

5.ts

declare let $;
declare let moment;
...
...
...

ngOnInit() {
    this.dateRangePicker("timeInput");
}
dateRangePicker(id) {
    const locale = {
      "format": 'YYYY-MM-DD',
      "separator": " - ",
      "applyLabel": "确定",
      "cancelLabel": "取消",
      "fromLabel": "起始时间",
      "toLabel": "结束时间'",
      "customRangeLabel": "自定义",
      "weekLabel": "W",
      "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
      "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      "firstDay": 1
    };
    let picker: any = $('#' + id);
    let dataRageOption: Object =
      {
        'locale': locale,
        
        //汉化按钮部分
        ranges: {
          '今日': [moment(), moment()],
          '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          '最近7日': [moment().subtract(6, 'days'), moment()],
          '最近30日': [moment().subtract(29, 'days'), moment()],
          '本月': [moment().startOf('month'), moment().endOf('month')],
          '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        startDate: moment().subtract(6, 'days'),
        endDate: moment()
        
      };
    picker.daterangepicker(dataRageOption, function (start, end, label) {
      console.info(`start:${start.format('YYYY-MM-DD')}, end:${end}, label:${label}`);
    });

  }