<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet" charset="UTF-8" media="screen">
<link href="../static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" charset="UTF-8" media="screen">
</head>
<body>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">日期时间</label>
<div class="input-group date form_datetime col-md-5" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly="readonly" >
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
<hr></hr>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">开始日期</label>
<div class="input-group date form_date col-md-5" data-date="" id="dtp_input21" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">结束日期</label>
<div class="input-group date form_date col-md-5" data-date="" id="dtp_input31" data-date-format="yyyy-mm-dd" data-link-field="dtp_input3" data-link-format="yyyy-mm-dd" ">
<input class="form-control" size="16" type="text" value="" readonly ">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<hr></hr>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">时间</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
</fieldset>
</form>
<hr></hr>
</div>
<div style="float: right; margin-right: 30px;margin-top: -10px">
<button class="btn btn-primary" id="search">查询</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
提示:
</h4>
</div>
<div class="modal-body">
开始日期应小于结束日期，请检查!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript" src="../static/js/static/jquery-3.1.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="../static/js/static/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/static/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../static/js/static/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
$('.form_time').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今日",
suffix: [],
meridiem: [],
weekStart: 1,
};
}(jQuery));
</script>
<script>
$("#search").click(function() {
var startTime = $("#dtp_input2").val();
var endTime = $("#dtp_input3").val();
var data1 = Date.parse(startTime.replace(/-/g, "/"));
var data2 = Date.parse(endTime.replace(/-/g, "/"));
var datadiff = data2-data1;
var time = 60*24*60*60*1000;
if(startTime.length>0 && endTime.length>0){
if(datadiff<0){
$('#myModal').modal({
show:true,
backdrop:true
})
return false;
}
}
})
</script>
</body>
</html>
