利用flatpickr的monthSelect插件为luckysheet添加年月控件

需求描述

        需要在luckysheet中添加一个“年月”单元格格式，并添加控件，但是luckysheet本身不支持。luckysheet中所有日期有关的控件都是用flatpickr这个库来完成的，完整使用年月控件，需要借助flatpickr的插件。

步骤

1、拿到flatpickr的monthSelect插件文件并引入

        先得到node_modules / flatpickr / dist 的monthSelect文件夹的内容，放入assets（放静态资源的地方）。要用到的是里面的js和css文件，把这两个文件引入，css引入到自己的index.html；在cellDatePickerCtrl.js文件中引入js文件。

const  monthSelectPlugin = require('../assets/monthSelect')

1.2   为弹框选项添加一项

        在zh.js中的dateFmtList中为“年月”添加一项（其他几个文件也可以注册）

2、 注册flatpickr时使用这个插件

步骤一：准备好插件数组

        // nby 新增“年月”
        let pluginsArr = []
        if(/Y.m/.test(dateFormat)){
            pluginsArr = [new monthSelectPlugin({
                // shorthand: true, //defaults to false
                dateFormat: "Y.m", //defaults to "F Y"
                // altFormat: "Y F", //defaults to "F Y"
            })]
            enableTime = false;
        }

 步骤2：注册的时候使用。onValueUpdate中我这里判断的不严谨(源码是使用onChange，但是会有问题，所以换成onValueUpdate)，可以更严谨点。

        // nby 添加插件，支持“年月”
         plugins:pluginsArr,

        .....

        // nby 新增“年月”
        if(pluginsArr.length > 0){
            dateStr = dayjs(selectedDates).format('YYYY-MM')
        }             

onValueUpdate【目前的代码】

onChange【之前的代码】

 3、修改setcellvalue

        在onChange的最后会setCellValue，所以还需要修改setdata 中的setcellvalue

            // 源码：
            // let mask = update(cell.ct.fa, vupdate);
            // nby 新增“年月”
            let mask;
            if(cell.ct != null && cell.ct.fa == "Y.m"){
                let str = parse_date_code(vupdate) 
                mask = str.y + '-' + str.m.toString().padStart(2, '0')
            }else{
                mask = update(cell.ct.fa, vupdate);
            }
            // nby 新增“年月” END

4、完善setcellvalue,导出parse_date_code

        在3中有使用parse_date_code方法，但是源代码没有导出，所以需要导出

        在format.js中的最后导出本文件中定义的parse_date_code方法。我的做法是在最后复制代码后导出。 

最后的效果

总结

        一开始百度没找到flatpickr支持年月控件，还打算用别的库，最后在谷歌用英文搜的时候第一项就是我需要的，所以谷歌是个好东西。flatpickr还是很强大的，移动端、pc端都支持，万不得已还是别换库。