移动端js时间选择多功能插件(原创)

所属分类:输入,APP模板-日期和时间,定制和风格,其他

分享到微信朋友圈
X
移动端js时间选择多功能插件(原创) ie兼容10

更新时间: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类型Number00:单选  1:多选  2:时间范围
position弹出位置Stringbottombottom, center, to
radius圆角Number \| Array0同css的border-radius
color全局文字颜色color#333333颜色值
background内容的背景颜色color#ffffff  颜色值
opacity遮罩的透明度Number0.70-1
selectBg选中时间的背景颜色color #409EFE颜色值
selectColor选中时间的文字颜色color#ffffff  颜色值
selectRadius选中时间的圆角Number1000 - 100,百分比;如果设置了文本,那么 圆角最大 10%
tranBg过渡背景颜色color #A0CFFF 颜色值,type为2有效,选择的开始和结束时间之间的元素的背景颜色
tranColor过渡文字颜色color#333333颜色值,type为2有效,选择的开始和结束时间之间的元素的文字颜色
title标题String选择时间#VALUE!
isCancel是否不显示取消按钮BooleanFALSEtrue,false
cancelText取消按钮文案 String 取消-
confirmText确认按钮文案String确认-
backFormat返回时间格式String .返回时间的拼接字符
isShow是否初始化完成就自动显示 BooleanFALSEtrue,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();
相关插件-日期和时间,定制和风格,其他

自定义样式日程插件(原创)

可以根据需求自定义显示样式,当前demo为显示一个周
  日期和时间
 41588  330

带有标记的日期选择器

基于bootstarpdatetimepicker的带标记的日期选择器
  日期和时间
 47406  319

jQuery日历插件

简洁、优雅的日历插件。
  日期和时间
 73565  518

Jquery滑动日期输入控件

Jquery滑动日期输入控件,手机使用效果最佳
  日期和时间
 38724  356

讨论这个项目(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/6/16 13:45:31
    可以初始化时间了,只要将多选的数组,到那一页就将哪一天的元素遍历选中,选中的再将数组中选中的过滤掉就可以。 回复
    ?? 0
    2023/5/12 9:18:53
    可以初始化选中时间么?
        荆棘0
        2023/5/23 16:01:51
        暂时不可以初始化选中时间
    回复
    白茶 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
        好的,谢谢指正🌹
    回复
    [QQ红包]发红包了! 0
    2022/9/30 10:19:00
    那个返回参数的statrTime 写错了,应该是startTime
        荆棘0
        2023/2/10 9:49:04
        好的,谢谢
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复