一款只能选择月日的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">