<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入css
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
<link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
-->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<link href="http://www.jq22.com/jquery/font-awesome.4.6.0.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<!-- 1111111111111111111111111111111111111111 -->
<h3>基本的daterangePicker用法</h3>
<div class="well">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div class="controls">
<div class="input-prepend input-group">
<span class="add-on input-group-addon">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</span>
<input type="text" readonly="readonly" size="200" class="form-control"
value="2019-2-4 -2019-3-4" name="reservation " id="reservation">
</div>
</div>
</div>
</fieldset>
</form>
</div>
<!-- 11111111111111111111111111111111111111111111111111 -->
</div>
<script src="./jquery.min.js"></script>
<script src="./bootstrap.min.js"></script>
<script src="./moment.min.js"></script>
<script src="./daterangepicker.js"></script>
<script>
$(function () {
//单个时间插件
$("#reservation").daterangepicker({
locale: {
format: "YYYY-MM-DD",
separator: " - ",
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
}
})
});
</script>
</body>
</html>
