bootstrap datetimepicker 在 angular 项目中的运用

datetimepocker 是一个日期时间选择器，bootstrap datetimepicker 是 bootstrap 日期时间表单组件。访问 bootstrap-datetimepicker 。

这次在项目中用到日期时间选择器，分享其用法和总结。

一、截图

功能完成后的项目截图

1. 时间起止输入框

2. 十年视图

3. 年视图

4. 月视图

5. 日视图

6. 时视图

二、依赖

1. 需要 bootstrap 的下拉菜单组件 (dropdowns.less) 的某些样式，还有 bootstrap 的 sprites (sprites.less and associated images) 中的箭头图标。

先安装 less

安装淘宝镜像(可能由于网络慢或被墙的原因，npm可能无法访问到) npm install -g cnpm --registry=https://registry.npm.taobao.org
安装 less cnpm install -g less (lessc -v返回了版本号说明安装成功)

然后编译 build/build_standalone.less lessc build/build_standalone.less datetimepicker.css

三、选择器需求

1. 初始化时，开始时间为当前时间减去一年，结束时间为当前时间。

2. 时间格式为 "2018-09-28 00:00:00 "。

3. 开始时间不能大于结束时间。

4. 开始时间不能大于当前时间。

5. 结束时间不能大于当前时间。

四、引入依赖

在 .angular-cli.json 文件中引入 bootstrap-datetimepicker.min.css(刚刚编译成的 datetimepicker.css 的压缩版)，bootstrap-datetimepicker.min.js, bootstrap-datetimepicker.zh-CN.js(简体中文格式)。

五、实现

选择器模板，由于该模板不是表单，所以使用双向数据绑定模板语法，将选择的时间流向组件处理，在显示到视图。

当错误提示为空时，将其隐藏。

<div class="start-end-time-search search-item">

    <label for="startTime" class="search-label start-time-label">起止时间</label>

    <input type="text" [(ngModel)]="startTime" placeholder="请选择开始时间" readonly id="startTime" class="search-input start-time-input">

    <label for="endTime" class="search-label end-time-label">至</label>

    <input type="text" [(ngModel)]="endTime" placeholder="请选择结束时间" readonly id="endTime" class="search-input end-time-input">

</div>

<button type="button" class="bg-btn search-btn" (click)="searchByKeyword()"

        [title]="isEnabledSearchBtn ? '查询离线记录' : '不可用(时间选择不正确)'"

        [class.isDisabled]="!isEnabledSearchBtn">

  <i class="iconfont icon-search"></i> 查询

</button>

<span class="error-tip" [hidden]="!startTimeErrorTip">{{startTimeErrorTip}}</span>

<span class="error-tip" [hidden]="!endTimeErrorTip">{{endTimeErrorTip}}</span>

选择器组件

定义公有属性并赋值，将开始时间和结束时间赋值为空字符串。

/*定义公有属性*/

public startTime: string = "";

public endTime: string = "";

public isEnabledSearchBtn: boolean = true;  // 查询按钮是可用的

public startTimeErrorTip: string = ""; // 开始时间选择错误提示

public endTimeErrorTip: string = ""; // 结束时间选择错误提示

将日期时间格式化，当出现一位数的格式时将其前面加 "0"。并返回两种日期时间格式，一种对象，便于拆分，设置开始时间为当前时间减一年。一种字符串，拼接好的格式。

/*

* 日期时间格式化

* 日期时间格式 "2018-09-28 00:00:00"

* */

dateTimeFormat(dateTime) {

  let dateTimeObj = {

      "year": dateTime.getFullYear(),

      "month": dateTime.getMonth() + 1,

      "day": dateTime.getDate(),

      "hours": dateTime.getHours(),

      "minutes": dateTime.getMinutes(),

      "seconds": dateTime.getSeconds()

    };

  for (let k in dateTimeObj) {

    if (dateTimeObj[k] < 10) {

      dateTimeObj[k] = "0" + dateTimeObj[k];

    }

  }

  let dateTimeString = dateTimeObj.year + "-" + dateTimeObj.month + "-" + dateTimeObj.day + " "

    + dateTimeObj.hours + ":" + dateTimeObj.minutes + ":" + dateTimeObj.seconds;

  return {"obj": dateTimeObj, "string": dateTimeString};

}

这里的当前时间有两种，初始化时和选中时间的时候，选中时间的当前时间要写在日期被改变时的方法中。

/*页面初始化时，填充时间*/

ngOnInit() {

  this.isEnabledSearchBtn = true;  // 初始化默认选择按钮可用

  let initNowTime = this.dateTimeFormat(new Date());

  // 开始时间用当前时间减去一年，结束时间使用当前时间。

  this.startTime = initNowTime.obj.year - 1 + "-" + initNowTime.obj.month + "-" + initNowTime.obj.day + " "

                   + initNowTime.obj.hours + ":" + initNowTime.obj.minutes + ":" + initNowTime.obj.seconds;

  this.endTime = initNowTime.string;

  /*下面处理选择的时间*/

  let jQuery: any = $;

  let that = this;

  jQuery("#startTime").datetimepicker({

    autoclose: true,  // 选择完成自动关闭时间选择器

    format: "yyyy-mm-dd hh:ii:ss",  // 时间格式

    language: "zh-CN",  // 使用简体中文

    todayBtn: "linked",  // 选择器底部显示今天，快速选择当前时间

    todayHighlight: true,  // 高亮显示今天，或已被选择的时间

    zIndexOffset: 1000  // UI，避免被其他设置了 z-index 样式的元素覆盖

  }).on("changeDate", function(startTime){ // 日期被改变时触发

    /*选中时间的时候的当前时间格式化*/

    let nowTimeString = that.dateTimeFormat(new Date()).string;

    that.startTime = that.dateTimeFormat(startTime.date).string;

    if (that.startTime > nowTimeString) {

      that.startTimeErrorTip = "开始时间不能大于当前时间";

      that.isEnabledSearchBtn = false;

    } else if (that.startTime > that.endTime) {

      that.startTimeErrorTip = "开始时间不能大于结束时间";

      that.isEnabledSearchBtn = false;

    } else {

      that.startTimeErrorTip = "";

      that.endTimeErrorTip = "";

      that.isEnabledSearchBtn = true;

    }

  }).data('datetimepicker');

  jQuery("#endTime").datetimepicker({

    autoclose: true,

    format: "yyyy-mm-dd hh:ii:ss",

    language: "zh-CN",

    todayBtn: "linked",

    todayHighlight: true,

    zIndexOffset: 1000

  }).on("changeDate", function(endTime) {

    /*选中时间的时候的当前时间格式化*/

    let nowTimeString = that.dateTimeFormat(new Date()).string;

    that.endTime = that.dateTimeFormat(endTime.date).string;

    if (that.endTime > nowTimeString) {

      that.endTimeErrorTip = "结束时间不能大于当前时间";

      that.isEnabledSearchBtn = false;

    } else if (that.startTime > that.endTime) {

      that.endTimeErrorTip = "结束时间不能小于开始时间";

      that.isEnabledSearchBtn = false;

    } else {

      that.startTimeErrorTip = "";

      that.endTimeErrorTip = "";

      that.isEnabledSearchBtn = true;

    }

  }).data('datetimepicker');

}

六、错误提示演示

时间选择错误时，给出提示，并且查询按钮不可用(提示选择正确的时间)。

巴特西

bootstrap datetimepicker 在 angular 项目中的运用

最新文章

热门文章