laydate.js日期时间选择插件
日期时间选择插件laydate.js：
效果图：
1. 引入JS。 官网：http://laydate.layui.com
<script type="text/javascript" src="js/laydate.js"></script>
2. 根据需要做相应的配置。详情参看官网。
<script>
laydate({
elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus', //响应事件。如果没有传入event，则按照默认的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
istime: true, //显示时间选项
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
</script>
实例源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>layDate日期时间选择插件</title>
<link href="" rel="stylesheet" />
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<form method="post" action="">
Way1,
请选择日期:<input type="text" name="date" onclick="laydate()" />
<hr />
Way2,
<input type="text" name="date" id='seldate' class="laydate-icon" /><hr />
<script>
laydate({
elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus', //响应事件。如果没有传入event，则按照默认的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
istime: true, //显示时间选项
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
</script>
Way3,
<input id="seldate1">
<span class="laydate-icon" onclick="laydate({elem:'#seldate1'});"></span>
</form>
</body>
</html>
Find more here：http://laydate.layui.com/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
日期时间选择器是一个定制的picker，因此他的用法和picker完全一致。打开picker的默认值是当前时间，可以通过value参数指定 datetime-picker 定制了 onChange 和 cols 参数，请不要设置这两个参数。 <input type="text" id='datetime-picker'/> <script> $("#datetime-picker").da
-
datePicker 日期选择或者时间选择 使用方法 AlipayJSBridge.call('datePicker', { beginDate: '2016-10-10', minDate: '2016-10-9', maxDate: '2017-10-9', mode: 1, }, function(e) { alert(JSON.stringify(e)); });
-
DateTimePicker 日期时间选择器 在同一个选择器里选择日期和时间 tip DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。 日期和时间点 通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 D
-
在同一个选择器里选择日期和时间 tip DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 DatePicker 和 TimePicker。 日期和时间点 通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。 <template> <div class="
-
DateTimePicker 日期时间选择器 在同一个选择器里选择日期和时间 日期和时间点 :::demo 通过设置isShowTime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。 constructor(props) { super(props) this.state = {} } render() { const {val
-
我想禁用日期时间选择器中的时间选择器。我正在使用一些参数，如picTime： false和form："dd MM yyyy"。但是没有用...我正在使用http://eonasdan.github.io/bootstrap-datetimepicker/ Plzz给出解决方案
-
我正在使用Kartik日期选择器。在数据库中，我正在使用时间戳。但是检出值没有设置。它显示（未设置）
-
我正在尝试实现这里介绍的日期时间选择器https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-安装程序，我已将文件文件下载到目录和。但当点击图标时，日历不会弹出。