2021-11-23 工作记录--LayUI-laydate-显示小时分钟秒、显示年月日 + 只显示年、只显示月、只显示日 + 显示年-月

最新推荐文章于 2024-07-29 14:48:30 发布

小呀小萝卜儿

最新推荐文章于 2024-07-29 14:48:30 发布

阅读量5.5k

点赞数 3

分类专栏：工作-LayUI 文章标签：前端 layui

本文链接：https://blog.csdn.net/weixin_48850734/article/details/121526474

版权

工作-LayUI 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

一、显示小时分钟秒 + 显示年月日

在这里插入图片描述

对应代码：

layui.use('laydate',function() {
	var laydate = layui.laydate;
	
	// 显示小时分钟秒
	laydate.render({
		elem  : '#date1',
		type  : 'time' , // 显示小时分钟秒，而不是年月日
		format: 'HH:mm:ss', // 显示格式：小时：分钟：秒
		// min: '09:30:00', // 可设置其最小值
		// max: '19:00:00', // 可设置其最大值
	});
	
	// 显示年月日
	laydate.render({
		elem: '#date2',
		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）才会返回。对象成员同上。
		}
	});
	
});

补充：显示日期范围

【不管type是什么类型，均可添加range: true,实现左右面板范围选择的开启】
在这里插入图片描述

对应代码：

laydate.render({
      elem: '#date2',
      range: true, // 或 range:'~'来定义分割字符
    });

二、只显示年 + 只显示月 + 只显示日

在这里插入图片描述

对应代码：

		<!-- 年 -->
        <div class="layui-input-block">
          <div class="layui-input-inline">
            <input type="text" name="date1" id="date1" placeholder="年" autocomplete="off" class="layui-input">
          </div>
        </div>

        <!-- 月 -->
        <div class="layui-input-block">
          <div class="layui-input-inline">
            <input type="text" name="date2" id="date2" placeholder="月" autocomplete="off" class="layui-input">
          </div>
        </div>

        <!-- 日 -->
        <div class="layui-input-block">
          <div class="layui-input-inline">
            <input type="text" name="date3" id="date3" placeholder="日" autocomplete="off" class="layui-input">
          </div>
        </div>

在这里插入图片描述
对应代码：

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

    // 年
    laydate.render({
      elem: '#date1',
      type: 'year', // 只提供年列表选择,默认可选择：年、月、日。
      format: 'yyyy', // 年份，至少四位数。如果不足四位，则前面补零
    });

    // 月
    laydate.render({
      elem: '#date2',
      type: 'month', // 只提供年、月选择,默认可选择：年、月、日。
      format: 'MM', // 月份，至少两位数。如果不足两位，则前面补零。
    });

    // 日
    laydate.render({
      elem: '#date3',
      format: 'dd', // 日期，至少两位数。如果不足两位，则前面补零。
    });
  })

三、显示年-月

// 显示年-月 (如：1999-08)
laydate.render({
  elem  : '#date', // html里对应的id值
  type  : 'month' ,
  // value : '2021-12', // 设置默认值
  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）才会返回。对象成员同上。
	}
});