一款只能选择月日的js控件,支持起止月日联动,支持链接符更换

发布日期 目录 Angular, AngularJS, JavaScript

一款只能选择月日的js控件,支持起止月日联动,支持链接符更换

业务场景

最近产品经理提了一个只能选择月日的需求,用来存储生日信息,不要年,只要月日,而且还不要使用下拉框的形式,找了现用的时间控件,发现年是必要要有的,无法满足需求,再去网上寻找,发现百度搜索出来的都是一堆乱七八糟的文章,索性还不如自己写一个,所以便有了这款只能选择月日的控件

先看下预览图
一款只能选择月日的js控件,支持起止月日联动,支持链接符更换

主要功能

  • 只能选择月和日 无法选择年以及时分秒
  • 支持起止月日联动
  • 支持链接符更换
  • 可用到AngularJS框架与Angular框架中

目前还不是很完美,对于错误的入参信息,并没有作出明确的抛出,所以还是尽量按照正确的入参格式进行控件的配置

使用方法

使用方法很简单,只需要在input上定义一个全局唯一的id,然后js初始化一下即可,栗子如下:

<input type="text" id="monthDate" readonly>

// 配置信息
var options = {
  // 月日触发的元素id,用于初始化月日控件,必传
  initEleId: '#moneyDate',
  // 选择天数的回调:点选天数与点击确定键,在这里面回显选中的月日到视图,value为拼接好的字符串
  ok: function (value, month, date) {
      document.querySelector('#moneyDate').value = value;
  },
  // 点击清空的回调:点击清空键,在这里面清空视图显示的值
  reset: function () {
      document.querySelector('#moneyDate').value = '';
  },
}
// 初始化控件
new MonthDate(options).init();

当然上面只是最简单的使用方法,如果要支持起止月日的联动,还需要其他的配置信息,具体使用情况可上码云仓库查看代码

码云仓库地址:https://gitee.com/seebin/monthDate

月日控件在线演示地址:http://seebin.gitee.io/monthdate/monthDate.html

扩展

用到AngularJS框架中

目前已运用于RequireJS + AngularJS框架,运用RequireJS引入月日控件库,再使用AngularJS创建一个指令来全局使用。(指令请参考AngularJS-Directive-monthDate.js文件)

用到Angular框架中

如果运用到Angular框架中,需要在angular的配置文件中(angular.json)修改style与script的配置项来引入css文件与js文件,
如下:

          // 将monthDate目录放到assets下,也可以放其他目录
          ...
          "styles": [
            "src/styles.scss",
            "src/assets/monthDate/monthDate.css"
          ],
          "scripts": [
            "src/assets/monthDate/monthDate.js"
          ]
          ...

然后在需要用到月日控件的component.ts文件里面,在顶部注入声明declare var MonthDate:any;, 防止编译器报错,然后在ngOnInit()方法里面初始化控件

  ...

  ngOnInit() {
    let owner = this;
    new MonthDate({
      // 月日触发的元素
      initEleId: '#monthDate',
      // 选择天数的回调:点选天数与点击确定键
      ok: function (value, month, date) {
        owner.monthDate = value;
      },
      // 点击清空的回调:点击清空键
      reset: function () {
        owner.monthDate = '';
      },
    }).init();
  }

  ...

在component.html文件的使用:

<input type="text" id="monthDate" readonly [value]="monthDate">

发表评论

邮箱地址不会被公开。