WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
日期和时间组件 - wui.wdate 更多 wdate 示例

模块加载名称:wdate
这是一个最简单的示例:
对应的代码如下:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>wdate快速使用</title>
  <link rel="stylesheet" href="wui.css" media="all">
</head>
<body>

<input type="text" class="wui-input" id="test1">

<script src="wui.js"></script>
<script>
wui.use('wdate', function(){
  var wdate = wui.wdate;

  //执行一个wdate实例
  wdate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>
通过核心方法:wdate.render(options) 来设置基础参数,也可以通过方法:wdate.set(options) 来设定全局基础参数。 类型:String/DOM,默认值:无
必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象
wdate.render({
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});
类型:String,默认值:date
用于单独提供不同的选择器类型,可选值如下表:
type可选值 名称 用途
year 年选择器 只提供年列表选择
month 年月选择器 只提供年、月选择
date 日期选择器 可选择:年、月、日。type默认值,一般可不填
time 时间选择器 只提供时、分、秒选择
datetime 日期时间选择器 可选择:年、月、日、时、分、秒
//年选择器
wdate.render({
  elem: '#test'
  ,type: 'year'
});

//年月选择器
wdate.render({
  elem: '#test'
  ,type: 'month'
});

//日期选择器
wdate.render({
  elem: '#test'
  //,type: 'date' //默认,可不填
});

//时间选择器
wdate.render({
  elem: '#test'
  ,type: 'time'
});

//日期时间选择器
wdate.render({
  elem: '#test'
  ,type: 'datetime'
});
类型:Boolean/String,默认值:false
如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
//年范围选择
wdate.render({
  elem: '#test'
  ,type: 'year'
  ,range: true //或 range: '~' 来自定义分割字符
});

//年月范围选择
wdate.render({
  elem: '#test'
  ,type: 'month'
  ,range: true //或 range: '~' 来自定义分割字符
});

//日期范围选择
wdate.render({
  elem: '#test'
  ,range: true //或 range: '~' 来自定义分割字符
});

//时间范围选择
wdate.render({
  elem: '#test'
  ,type: 'time'
  ,range: true //或 range: '~' 来自定义分割字符
});

//日期时间范围选择
wdate.render({
  elem: '#test'
  ,type: 'datetime'
  ,range: true //或 range: '~' 来自定义分割字符
});
类型:String,默认值:yyyy-MM-dd
通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。wdate 支持的格式如下:
格式符 说明
yyyy 年份,至少四位数。如果不足四位,则前面补零
y 年份,不限制位数,即不管年份多少位,前面均不补零
MM 月份,至少两位数。如果不足两位,则前面补零。
M 月份,允许一位数。
dd 日期,至少两位数。如果不足两位,则前面补零。
d 日期,允许一位数。
HH 小时,至少两位数。如果不足两位,则前面补零。
H 小时,允许一位数。
mm 分钟,至少两位数。如果不足两位,则前面补零。
m 分钟,允许一位数。
ss 秒数,至少两位数。如果不足两位,则前面补零。
s 秒数,允许一位数。
通过上述不同的格式符组合成一段日期时间字符串,可任意排版,如下所示:
属性名 属性值
yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒
yyyyMMdd 20170818
dd/MM/yyyy 18/08/2017
yyyy年M月 2017年8月
M月d日 8月18日
北京时间:HH点mm分 北京时间:20点08分
yyyy年的M月某天晚上,大概H点 2017年的8月某天晚上,大概20点
//自定义日期格式
wdate.render({
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});
类型:String,默认值:new Date()
支持传入符合 format 参数设定的日期格式字符,或者 new Date()
//传入符合format格式的字符给初始值
wdate.render({
  elem: '#test'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});

//传入Date对象给初始值
wdate.render({
  elem: '#test'
  ,value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳
});
类型:Boolean,默认值:true
用于控制是否自动向元素填充初始值(需配合 value 参数使用)
wdate.render({
  elem: '#test'
  ,value: '2017-09-10'
  ,isInitValue: false //是否允许填充初始值,默认为 true
});
类型:string,默认值:min: '1900-1-1'、max: '2099-12-31'
设定有限范围内的日期或时间值,不在范围内的将不可选中。这两个参数的赋值非常灵活,主要有以下几种情况:
1. 如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式
2. 如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
3. 如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
//日期有效范围只限定在:2017年
wdate.render({
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});

//日期有效范围限定在:过去一周到未来一周
wdate.render({
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});

//日期时间有效范围的设定:
wdate.render({
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});

//时间有效范围设定在: 上午九点半到下午五点半
wdate.render({
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});
毫不保留地说,min和max参数是两个非常强大的存在,合理运用,可帮助用户在日期与时间的选择上带来更为友好的约束与体验。 类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click
//自定义事件
wdate.render({
  elem: '#test'
  ,trigger: 'click' //采用click弹出
});
类型:Boolean,默认值:false
如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件,如:
//默认显示
wdate.render({
  elem: '#test'
  ,show: true //直接显示
});

//外部事件调用
lay('#test1').on('click', function(e){ //假设 test1 是一个按钮
  wdate.render({
    elem: '#test'
    ,show: true //直接显示
    ,closeStop: '#test1' //这里代表的意思是:点击 test1 所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
  });
});
类型:String,默认值:absolute
用于设定控件的定位方式,有以下三种可选值:
position 可选值 说明
abolute 绝对定位,始终吸附在绑定元素周围。默认值
fixed 固定定位,初始吸附在绑定元素周围,不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static 静态定位,控件将直接嵌套在指定容器中。
注意:请勿与 show 参数的概念搞混淆。show 为 true 时,控件仍然是采用绝对或固定定位。而这里是直接嵌套显示
下面是一个直接嵌套显示的例子:
【HTML】
<span id="testView"></span>
<div id="test2"></div>
 
【JS】:      
//嵌套在指定容器中
wdate.render({
  elem: '#test2'
  ,position: 'static'
  ,change: function(value, date){ //监听日期被切换
    lay('#testView').html(value);
  }
});
类型:Number,默认值:66666666
一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效。
//设定控件的层叠顺序
wdate.render({
  elem: '#test'
  ,zIndex: 99999999
});
类型:Boolean,默认值:true
如果设置 false,将不会显示控件的底部栏区域
//不显示底部栏
wdate.render({
  elem: '#test'
  ,showBottom: false
});
类型:Array,默认值:['clear', 'now', 'confirm']
右下角显示的按钮,会按照数组顺序排列,内置可识别的值有:clear、now、confirm
//只显示清空和确认
wdate.render({
  elem: '#test'
  ,btns: ['clear', 'confirm']
});
类型:String,默认值:cn
我们内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。这里并没有开放自定义文字,是为了避免繁琐的配置。
//国际版
wdate.render({
  elem: '#test'
  ,lang: 'en'
});
类型:String,默认值:default
我们内置了多种主题,theme 的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
//墨绿背景主题
wdate.render({
  elem: '#test'
  ,theme: 'molv'
});

//自定义背景色主题 - 非常实用
wdate.render({
  elem: '#test'
  ,theme: '#393D49'
});

//格子主题
wdate.render({
  elem: '#test'
  ,theme: 'grid'
});
另外,你还可以传入其它字符,如:theme: 'xxx',那么控件将会多出一个 class="wdate-theme-xxx" 的CSS类,以便于你单独定制主题。 类型:Boolean,默认值:false
我们内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示。
//允许显示公历节日
wdate.render({
  elem: '#test'
  ,calendar: true
});
类型:Object,默认值:无
calendar 参数所代表的公历节日更多情况下是一个摆设。因此,我们还需要自定义标注重要日子,比如结婚纪念日?日程等?它分为以下两种:
标注 格式 说明
每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月
特定的日期 {'2017-8-21': '发布'} -
可同时设定多个,如:
//标注重要日子
var ins1 = wdate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年12月31日
    ,'0-0-10': '工资' //每个月10号
    ,'2017-8-15': '' //具体日期
    ,'2017-8-20': '预发' //如果为空字符,则默认显示数字+徽章
    ,'2017-8-21': '发布'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日,弹出提示语
      ins1.hint('中国人民抗日战争胜利72周年');
    }
  }
});
非常实用的存在,是时候利用它制作你的日程表了。 控件在打开时触发,回调返回一个参数:初始的日期时间对象
wdate.render({
  elem: '#test'
  ,ready: function(date){
    console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    }
});
年月日时间被切换时都会触发。回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象
wdate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
  }
});
点击日期、清空、现在、确定均会触发。回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象
wdate.render({
  elem: '#test'
  ,done: function(value, date, endDate){
    console.log(value); //得到日期生成的值,如:2017-08-18
    console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
  }
});
事实上,执行核心方法 wdate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法,比如:hint 方法
var ins1 = wdate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    ins1.hint(value); //在控件上弹出value值
  }
});
如果你不是采用 wui 或者普通 script 标签方式加载的 wdate.js,而是采用 requirejs 等其它方式引用 wdate,那么你需要设置基础路径,以便 wdate.css 完成加载。
wdate.path = '/static/xxx/'; //wdate.js 所在目录

//配置好路径后,再调用
wdate.render(options);
方法名 备注
wdate.getEndDate(month, year) 获取指定年月的最后一天,month 默认为当前月,year 默认为当前年。如:
var endDate1 = wdate.getEndDate(10); //得到31
var endDate2 = wdate.getEndDate(2, 2080); //得到29
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile