素材牛VIP会员

实用的JS手机端多功能时间选择插件

 所属分类:网页特效-时间日期,日期控件

 浏览:677次  下载:2次  评论:3次  更新时间:2022-08-09
实用的JS手机端多功能时间选择插件
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:移动端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();

文件目录结构

  • ┝ index.html
  • js
    • ┝ dateMultiFunc-es5.js
    • ┝ dateMultiFunc.js

相关素材 - 时间日期,日期控件

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

wx***75  
2022年08月23日

不错的插件!

回复
飞***技  
2022年09月03日

很实用

回复
wx***91  
2022年10月24日

不错的插件!

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:2
所需牛币:25 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)