最近花了差不多快两周的空闲时间打造了一个日期选择组件，先看看效果
可以说是一个经常要用到，很少人会主动去实现的一个组件，毕竟实现起来还是要一定的时间的，所以平时工作之余就可以试着打造一些基础组件库，既可以锻炼自己的基本功，又可以为公司为社区做贡献~
先看一下用法吧，推荐查看文档，可以实时交互
安装使用
通常有以下几种安装方式
- npm
npm i xy-ui
- cdn
<script type="module" src="https://unpkg.com/xy-ui/components/xy-pagination.js"></script> <!--或者--> <script type="module"> import 'https://unpkg.com/xy-ui/components/xy-pagination.js' </script>
- github
直接从github拷贝源码。
使用
<xy-date-picker></xy-date-picker>
一个标签的事，开箱即用，可能是使用起来最方便的日期选择器了。
实现原理
这里简单介绍一下日期的生成原理
要实现一个月的展示，一般分为三个部分，分别为前一个月，当前月，下一个月
为此，我们需要知道
1.前一个月的最后一天
2.当前月的天数及当前月第一天是周几（便于摆放位置）
假如前一个月最后一天是31号，并且当月的第一天是周二及总天数30，那么这个月的排列就确定了
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
| 30 | 31 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
首先是获取一个月的最后一天，通常每个月的天数是固定的，只有二月不固定，有一种做法是把二月单独列出来，通过计算闰年的方式来判断是29还是28。
其实还有一种方式可能方便，我们可以直接利用日期的容错机制，比如
new Date(2019,2,1) //2019年3月1日 new Date(2019,2,0) //2019年3月1日的前一天，也就是2019年2月的最后一天
然后获取当天的日期，也就是当月天数
new Date(2019,2,0).getDate() //28
然后是获取一个月的第一天是星期几，这个比较容易
new Date(2019,2,1).getDay() //5，周五
然后我们可以通过这些信息组合出一个月份信息
function getDays(year,month){ const lastdays = new Date(year,month-1,0).getDate(); const days = new Date(year,month,0).getDate(); const week = new Date(year,month-1,1).getDay(); const prev = Array.from({length:week},(el,i)=>(month==0?year-1:year)+'-'+(month==0?12:month-1)+'-'+(lastdays+i-week+1)); const current = Array.from({length:days},(el,i)=>year+'-'+month+'-'+(i+1)); const next = Array.from({length:42 - days - week},(el,i)=>(month==12?year+1:year)+'-'+(month==12?1:month+1)+'-'+(i+1)); return [...prev,...current,...next]; }
这里简单做了一个在控制台输出日历
源码如下，小伙伴可以试试
function renderCalendar(d){ const date = new Date(d||new Date); const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDate(); const lastdays = new Date(year,month,0).getDate(); const days = new Date(year,month+1,0).getDate(); const week = new Date(year,month,1).getDay(); const prev = Array.from({length:week},(el,i)=>([month==0?year-1:year,month==0?12:month,lastdays+i-week+1])); const current = Array.from({length:days},(el,i)=>[year,month+1,i+1]); const next = Array.from({length:42 - days - week},(el,i)=>([month==11?year+1:year,month==11?1:month+2,i+1])); const final = [...prev,...current,...next]; const now = Array.from({length:6},(el,i)=>final.slice(i * 7, i * 7 + 7)); const s = `———————————————————————————————————— ${year+' - '+(month+1+'').padStart(2,0)} %c———————————————————————————————————— | Su | Mo | Tu | We | Th | Fr | Sa | ———————————————————————————————————— %c${now.map(el=>el.map(m=>(m[2]==1?'%c':'')+'| '+((m[2]+'').padStart(2,' ')+' ')).join('')+'|\n————————————————————————————————————\n').join('')} ` console.clear(); console.log(s,"font-weight:bold;color:blue","color:#999","color:#000","color:#999") }
以上就是日期生成原理了，进一步可以实现日期切换，单选，范围选择等功能。
属性
xy-date-picker定义以下几种属性，结合使用适用性更广。
默认值defaultvalue
可以给日期选择器指定一个初始日期defaultvalue，取值为合法的时间戳字符串DataString，默认为当前日期。
支持形如以下的字符串，可参考Date.parse()
"2019-2-28" "2019-02-28" "2019/2/28" "2019,2,28" "2019 2 28" "Feb 28 2019" //...其他日期格式 //以上均表示2019年2月28日。
<xy-date-picker defaultvalue="2019-2-28"></xy-date-picker>
类型type
支持设置日期选择类型，可选择date（默认）、month、year，分别实现日期选择器、月选择器、年选择器。
<xy-date-picker></xy-date-picker> <xy-date-picker type="month"></xy-date-picker> <xy-date-picker type="year"></xy-date-picker>
值value、日期date
设置或返回日期选择器的value属性值。值为当前类型下的日期，格式形如2019-10-10。
返回日期的标准格式date，可以将值转换成任意格式的日期。
//value "2019-08-31" //date "Sat Aug 31 2019 14:54:05 GMT+0800 (中国标准时间)"
可以通过JavaScript设置或获取。
date.value; //获取 date.date; //获取 date.value = '2019-10-10'; //原生属性操作 date.getAttribute('value'); date.getAttribute('date'); date.setAttribute('value','2019-10-10');
最小值min、最大值max
设置日期选择范围，超出范围之外的不可选中，格式同defaultvalue。
<xy-date-picker min="2019-8-20" max="2019-12-21"></xy-date-picker> <xy-date-picker type="month" min="2019-5" max="2019-12"></xy-date-picker> <xy-date-picker type="year" min="2018" max="2050"></xy-date-picker>
禁用disabled
通过disabled可以禁用，禁用后无法打开日期选择器。
<xy-date-picker disabled></xy-date-picker>
方向
通过dir可以设置日期选择器方向，默认为bottomleft，可以取值top、right、bottom、left、topleft、topright、righttop、rightbottom、bottomleft、bottomright、lefttop、leftbottom。当你的日期选择器位于屏幕边缘时可以调整该属性。
<xy-date-picker dir="righttop"></xy-date-picker>
范围选择range
添加range属性可以实现日期范围选择。
<xy-date-picker range></xy-date-picker>
可以指定一个默认范围defaultvalue，格式形如2019-10-10~2019-12-31，用~链接。默认为当前日期。
<xy-date-picker range defaultvalue="2019-10-10~2019-12-31"></xy-date-picker>
范围选择模式下的value和date均为数组
//value ["2019-05-15", "2019-12-26"] //date ["Wed May 15 2019 08:00:00 GMT+0800 (中国标准时间)", "Thu Dec 26 2019 08:00:00 GMT+0800 (中国标准时间)"]
事件event
当选好日期后，按确定按钮可以触发change回调。
<xy-date-picker onchange="console.log(event)"></xy-date-picker>
event:{ detail:{ value, date } }
其他触发方式
date.onchange = function(ev){ console.log(this.value); console.log(this.date); console.log(ev.target.value); console.log(ev.detail.value); console.log(ev.detail.date); } date.addEventListener('change',function(ev){ console.log(this.value); console.log(this.date); console.log(ev.target.value); console.log(ev.detail.value); console.log(ev.detail.date); })
其他
xy-date-picker内部基于xy-popover和xy-date-pane实现。
<xy-popover > <xy-button class="date-btn"></xy-button> <xy-popcon> <xy-date-pane id="color-pane"></xy-date-pane> <div class="pop-footer"> <xy-button id="btn-cancel">取消</xy-button> <xy-button type="primary" id="btn-submit">确认</xy-button> </div> </xy-popcon> </xy-popover>
其中，xy-date-pane为日期选择面板，可独立使用，如果你只是想要一个日历，可以使用这个组件。
<xy-date-pane></xy-date-pane>
事件和属性与xy-date-picker一致。
小节
总体来说，xy-date-picker使用起来还是很容易的，无需写大量脚本，就像使用一个input，大部分情况只需知道一个onchange事件就可以了。
其实xy-ui的组件设计都是靠近原生的，没有那些自创的事件，比如这里的onchange有些日期组件库就喜欢搞成datechange什么的，虽然语义很好，但是不够原生，不够统一，用户完全无感，不看文档完全不知道下手，反倒是原生更具有代表性，规范性，可以说拿到这个组件，往页面上一放，根本无需看api文档即可上手大部分功能。
目前xy-ui已经完成了大部分常见组件，后续有其他会陆续补充，希望有需要的小伙伴可以马上用起来，也希望可前往github给颗star，谢谢~
