<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap时间插件用法</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/datepicker3.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
<div class="form-group">
<label>参加工作时间 <em>*</em></label>
<input type="text" class="form-control" readonly="readonly" data-verify data-noempty="参加工作时间不能为空" name="starttime" id="starttime" placeholder="请选择参加工作时间">
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(‘.contact-box‘).each(function() {
animationHover(this, ‘pulse‘);
});
$(‘#starttime‘).datetimepicker({
language: ‘zh-CN‘,
startDate: new Date(),
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
}).on(‘changeDate‘, function(ev) {
var d = $(‘#starttime‘).val();
if(d != "") {
$(‘#endtime‘).datetimepicker(‘setStartDate‘, $(‘#starttime‘).val());
}
});
$(‘#endtime‘).datetimepicker({
language: ‘zh-CN‘,
startDate: new Date(),
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
}).on(‘changeDate‘, function(ev) {
var d = $(‘#endtime‘).val();
if(d != "") {
$(‘#starttime‘).datetimepicker(‘setEndDate‘, d);
}
});
});
</script>
下载demo链接：https://i.cnblogs.com/Files.aspx
原文地址：https://www.cnblogs.com/fkcqwq/p/10836967.html
时间： 2024-10-29 10:02:23