效果
image.png
css
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
js
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<style>
p {
width:300px;
margin:10px auto;
}
input {
display:inline-block;
}
#abc {position:relative;}
</style>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="blrz-entry-date-start">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">补录日期:</div>
<input type="text" class="form-control" id="blrz-entry-date-start" placeholder="请选择补录日期">
<div class="input-group-addon remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></div>
<label class="input-group-addon" for="blrz-entry-date-start"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></label>
</div>
</div>
<button type="submit" class="btn btn-primary">确定</button>
</form>
<p id="abc"></p>
</body>
</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script>
$.fn.datetimepicker.dates['zh'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六","日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六","日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
meridiem: ["上午", "下午"],
//suffix: ["st", "nd", "rd", "th"],
today: "今天"
};
$("#blrz-entry-date-start").datetimepicker({//选择年月日
format: 'yyyy-mm-dd',//日期格式化, 是由 d, dd, D, DD, m, mm, M, MM, yy, yyyy组成的组合.
language: 'zh',
autoclose: true,//选中之后自动隐藏日期选择框
endDate:new Date(),//结束时间
minView : 2, //显示到日
pickerPosition : 'bottom-left',//从哪个方向出来
container: '#abc',//内容 String. 默认值: “body” 将日期控件的弹出加到指定元素上; 例如: container: ‘#picker-container’ (默认为 “body”)
todayHighlight:true,//今日高亮展示 Boolean. 默认值: false 如果设为true, 当前日期会被高亮显示。
todayBtn:true,//今日按钮 Boolean, “linked”. 默认值: false 如果设为 true 或者 “linked”, 在日期控件最下方显示一个 “Today” 按钮，用来选择当前日期。如果设为 true, “Today” 按钮则只会将当前日期移动到试图内; 如果是 “linked”, 当前日期则会在点击按钮的同时被选中.
showWeekDays:true,//显示星期 Boolean. 默认值: true 如果设为false, 控件视图中将不再显示星期的名字.默认行为是添加星期.
showOnFocus:true,//获取焦点时显示 Boolean. 默认值: true 如果为false, 当input元素获取焦点时，它所关联的日期控件会被阻止显示。
clearBtn:true,//清除按钮 Boolean. 默认值: false 如果设为true, 在日期控件最下方显示一个“Clear”按钮用来清除input中的值.如果“autoclose”也设为true，那么这个按钮也将关闭Datepicker
enableOnReadonly:true,//只读状态可用 Boolean. 默认值: true 如果设置为false，那么在只读日期控件上不再显示日历.
forceParse:true//在日期控件关闭时是否强制转换input值. 当用户输入无效值时，控件将会强制转换该值，并且将转换后新的有效的符合给定format格式的值重新赋给Input元素。
});
$('.remove').on('click',function(){
console.log($('#blrz-entry-date-start').val());
})
</script>
网友评论