layui_日期选择器02

日期选择器

上一篇博客我已经写了基本的几种选择器的方法了，这里就不再重申了，感兴趣的可以去康康
文章链接
然后今天我们在这个基础上，延伸出另外几种选择器的方式
有以下几种

• 范围选择器
• 自定义格式的选择器
• 公历节日选择器
• 控制可选的日期与时间
• 非input元素/直接嵌套显示的选择器
• 其它主题的选择器

然后在做实例之前呢，我们先要认识几个参数，这是上一篇博客里没有讲到的：

参数

range

开启左右面板范围选择
类型：Boolean/String，默认值：false
如果设置 true，将默认采用 “ - ” 分割

format

自定义格式
默认值：yyyy-MM-dd
通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下

通过上述不同的格式符组合成一段日期时间字符串，可任意排版

min/max

最小/大范围内的日期时间值
默认值：min: ‘1900-1-1’、max: ‘2099-12-31’
设定有限范围内的日期或时间值，不在范围内的将不可选中

position - 定位方式

类型：String，默认值：absolute
用于设定控件的定位方式，有以下三种可选值

theme - 主题

类型：String
默认值：default
layui内置了多种主题
可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

calendar

是否显示公历节日
类型：Boolean，默认值：false
layui内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

选择器举例

范围选择器

代码

js文件
elem后跟input的id
range为true开启左右面板范围选择
type默认就是为date日期，所有这里可以省略
如果要年范围选择器的话，就设置type：‘year’
同理，年月范围设置type为month
时间范围：type为time
日期加时间范围：type为datetime

layui.use('laydate', function(){
   
  var laydate = layui.laydate;
 //日期范围
  laydate.render({
   
    elem: '#test6'
    ,range: true
  });
  });

//日期时间范围
 laydate.render({
   
   elem: '#test10'
   ,type: 'datetime'
   ,range: true
 });

jsp页面

<div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="test6" placeholder=" - ">
      </div>
    </div>

日期范围选择器效果

自定义格式选择器

代码

js文件
elem后跟input的id
format自定义格式，通过上述不同的格式符组合成一段日期时间字符串

layui.use('laydate', function(){
   
  var laydate