日期插件的包为:mydate.js。
1:首先将日期插件的包引入到页面中
<script language="JavaScript" src="../Inc/Js/mydate.js"></script>2:设置鼠标点击事件,当鼠标点击获得焦点的时候,触发事件,调用方法
<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>"><input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">
3:完整页面代码
<?phpdate_default_timezone_set("PRC")
$nowtime = time()
$rq = date("Y-m-d",$nowtime)
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<meta name="generator" content="FFKJ.Net" />
<link rev="MADE" href="mailto:FFKJ@FFKJ.Net">
<title>在线--后台</title>
<link rel="stylesheet" type="text/css" href="../Skins/Admin_Style.Css" />
<script language="JavaScript" src="../Inc/Js/mydate.js"></script>
</head>
<body>
开始时间:<input type="text" name="starttime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">
结束时间:<input type="text" name="endtime" onfocus="MyCalendar.SetDate(this)" value="<?php echo $rq?>">
</body>
</html>
vue-calendar - 日期选择插件vue-datepicker - 日历和日期选择组件
vue-datetime-picker - 日期时间选择控件
vue2-calendar - 支持lunar和日期事件的日期选择器
vue-fullcalendar - 基于vue.js的全日历组件
vue-datepicker - 漂亮的Vue日期选择器组件
datepicker - 基于flatpickr的时间选择组件
vue2-timepicker - 下拉时间选择器
vue-date-picker - VueJS日期选择器组件
vue-datepicker-simple - 基于vue的日期选择器
一下好一款laydate.js日期时间选择插件,具有一定的参考价值,希望可以帮到你
日期时间选择插件laydate.js:
效果图:
1. 引入JS。
<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>