移动端js时间选择多功能插件

 189去下载

移动端js时间选择多功能插件;支持 单选,多选,时间范围,指定时间选择,不可选时间。


移动端js时间选择多功能插件


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();


本文网址:https://www.zztuku.com/detail-12889.html
转载请声明来自:站长图库 - 移动端js时间选择多功能插件


使用声明:

1、本站所有素材,仅限学习交流,请勿用于商业用途。

2、本站资源大多无解压密码,如遇需要解压密码,无特殊说明,均为:zztuku.com

3、下载积分可通过日常 签到绑定邮箱 等途径免费获得!

4、本站提供的源码、模板、软件工具等其他资源,均不包含技术服务,请大家谅解!由于资源大多存储在云盘,如出现链接失效请评论反馈。

5、如果素材损害你的权益,请 联系我们 给予处理。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢

    推荐六款移动端 UI 框架