使用layui中layDate时间组件

普通的input框中的type="data"可以是选择时间 年月日,具体的时间时没有办法选择的,不知道怎么调,改动起来比较费事 也没有什么样式效果,
使用layui中layDate时间组件_第1张图片
因为项目中使用layuid的组件比较多我就直接使用layDate组件了,
时间格式号调节,格式很多需要什么自己改动就行(根据自己需要来)。
使用layui中layDate时间组件_第2张图片

使用方法(很简单,引入调用即可)

1、首先下载layDate的js文件,用线上的也可以 但不建议使用(测试的还可以)
点击到下载页面,或者访问https://www.layui.com/laydate/
下载好了根据自己情况引入到项目中即可,
使用layui中layDate时间组件_第3张图片
我把他放到了框架静态资源处,

<script src="../static/dsadmin/assets/laydate/laydate.js" type="text/javascript"></script>

2、显示控件

//控件
<input type="text" name="pizhuntime" id="test" >

<script>
//日期时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,trigger: 'click'
});
</script>

效果:
使用layui中layDate时间组件_第4张图片

=========================================================
点击查看控件格式
使用layui中layDate时间组件_第5张图片

3、也可以自定义时间格式,需要什么格式根据样式代码更改就好了

//自定义日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});

例如:

页面格式 示例
yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒
dd/MM/yyyy 02/03/2020
yyyy年M月 2020年3月
北京时间:HH点mm分 北京时间:19点10分

使用layui中layDate时间组件_第6张图片

你可能感兴趣的:(html)