插件描述：移动端js时间选择多功能插件；支持 单选，多选，时间范围，指定时间选择，不可选时间
更新时间：2023-04-19 22:52:36
更新说明：优化
更新时间：2023-04-06 12:19:05
更新说明：
1、优化日期标题月份名称写成了日。
2、优化 prevNextMonthFunc 方法 计算方式。（下个月上个月没有默认日期的日，会导致获取下月日期列表显示错误）。
3、优化 日期范围 选择 样式错乱 bug。
更新时间：2023-02-12 22:21:39
更新说明：时间范围 返回参数单词错误修改，statrTime 修改成 startTime
更新时间：2022-08-11 01:28:34
更新说明：优化 单选多选，切换月份后，选中样式错误问题。更新压缩版本
更新时间：2022-08-03 23:43:30
移动端-时间选择多功能插件
1、介绍
移动端-时间选择多功能插件；支持 单选，多选，时间范围，指定时间选择，不可选时间
2、使用说明
引入默认ES6版本：
<script src="./js/dateMultiFunc.js"></script>
ES5版本：
<script src="./js/dateMultiFunc-es5.js"></script>
使用:
js
let dateMulti = new dateMultiFunc({
minTime: 1,
maxTime: 1,
isShow: true,
type: 1,
cancelFunc: () => {
// 取消
console.log("取消")
},
confirmFunc: (res) => {
// 确认
console.log(res)
}
});Date 问题（注意）
ie内核浏览器，时间格式请使用 "/" 和 "."，并写全年月日，最好不要用其他格式的时间，其他格式没优化
3、参数说明
| 参数名 | 参数作用 | 参数类型 | 默认值 | 描述/注意 |
| type | 类型 | Number | 0 | 0:单选 1:多选 2:时间范围 |
| position | 弹出位置 | String | bottom | bottom, center, to |
| radius | 圆角 | Number \| Array | 0 | 同css的border-radius |
| color | 全局文字颜色 | color | #333333 | 颜色值 |
| background | 内容的背景颜色 | color | #ffffff | 颜色值 |
| opacity | 遮罩的透明度 | Number | 0.7 | 0-1 |
| selectBg | 选中时间的背景颜色 | color | #409EFE | 颜色值 |
| selectColor | 选中时间的文字颜色 | color | #ffffff | 颜色值 |
| selectRadius | 选中时间的圆角 | Number | 100 | 0 - 100，百分比；如果设置了文本，那么 圆角最大 10% |
| tranBg | 过渡背景颜色 | color | #A0CFFF | 颜色值，type为2有效，选择的开始和结束时间之间的元素的背景颜色 |
| tranColor | 过渡文字颜色 | color | #333333 | 颜色值，type为2有效，选择的开始和结束时间之间的元素的文字颜色 |
| title | 标题 | String | 选择时间 | #VALUE! |
| isCancel | 是否不显示取消按钮 | Boolean | FALSE | true,false |
| cancelText | 取消按钮文案 | String | 取消 | - |
| confirmText | 确认按钮文案 | String | 确认 | - |
| backFormat | 返回时间格式 | String | . | 返回时间的拼接字符 |
| isShow | 是否初始化完成就自动显示 | Boolean | FALSE | true,false |
| appointTime | 指定可选日期 | Array | [] | type 0 1 有效，字符串数组 和 json数组(可带上文本) 列:["2022.7.1","2020.7.3"] [{date:"2022.7.1"},{date:"2022.7.2"}] |
| appointOn | 指定不可选日期 | Array | [] | 同上 |
| minTime | 可选最小时间 | Number \| String | "" | Number：表示年数，默认时间的多少年前。<br/>String：不写天数，表示当月1号 |
| maxTime | 可选最大时间 | Number \| String | "" | 同上 |
| defaultYears | 默认打开显示的年月 | String \| Date | "" | 时间字符串 或 时间 |
| cancelFunc | 取消回调 | function | () => { } | cancelFunc: () => {console.log("取消")} |
| confirmFunc | 确认回调 | function | (res) => { } | confirmFunc: (res) => {console.log("确认")}，详见 res值 |
res值
res为数组数据，如果 type为2，返回的是 json数据
js
// type = 2时，res值
endTime:{},//结束时间
statrTime:{},//开始时间| 字段名 | 描述 |
| year | 年份 |
| month | 月份 |
| day | 日 |
| time | 时间字符串，根据 backFormat 参数拼接， 如："2022.7.4" |
| timestamp | 时间戳（ms） |
| text | 文本 |
4、可用方法
1. 显示方法 ： `show()`
2. 销毁方法 ： `destroy()`
列子
js
let dateMulti = new dateMultiFunc(); dateMulti.show(); dateMulti.destroy();
PREVIOUS:
NEXT:
相关插件-日期和时间,定制和风格,其他
讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
随心所欲 1
2023/8/16 10:05:16
提交个默认选中属性：
this.options.defaultDate: ""//新增
// 生成 时间列表
createDateList()
方法中找到
// 可选
// 监听点击事件
div.onclick = function () {
_this.dateClick(this)
};在上面新增
// 当前日期 == 遍历的日期
if(new Date(this.options.defaultDate).getDate() == today){
div.classList.add("select_firstlast");//增加类
this.selectObj = [div];//添加到选中的数组中
}
随心所欲1
2023/8/16 10:06:32
-
只针对单选type:0的情况
随心所欲1
2023/8/16 14:14:47
发现这样有个bug当前日期不能点击确认，也就是没有点击事件this.selectTimes的这个数组是空的，所以想到一个更简单的方法，自动点击；
1、改动today定义位置
let today;
// 在1号位置 开始塞入日期
if (i >= oneweek) {
today = i - oneweek + 1;2、在date_list.appendChild(div);后加
// 当前日期 == 遍历的日期
if(this.options.defaultDate && new Date(this.options.defaultDate).getDate() == today){
div.click();
}
白茶 0
2023/3/29 9:51:55
-
作者好，想提几个bug
1、prevNextMonthFunc()方法最后一行的修改标题的最后一个字应该为 月；
2、如果传的默认日期是2023/3/29，或者今天是3/29，然后点击回退到上一月，也就是2月，会出错，原因是因为
prevNextMonthFunc（）这个方法对月的处理是减一，3/29减一后为2/29，保存时间getYearsDay()方法中对时间处理采用了new Date(time),new Date(2023/2/29)会变成2023/3/1，所以导致该问题出现
荆棘0
2023/4/4 14:41:07
-
好的，谢谢指正🌹
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
