日期、时间选择控件 - datetimepicker
页面上添加控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="input-append date form_datetime">
<input size="20" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</body>
</html>
- 基本使用
$(".form_datetime").datetimepicker({});
1.git.gif
可以看出，默认情况下，控件可以选择并显示“年月日时分”，并且分钟的步长是5分钟，选择后控件日期选择器不会自动关闭；
2.选中后关闭选择器
$(".form_datetime").datetimepicker({
autoclose: true
});
1.git.gif
3.设置日期选择器位置
$(".form_datetime").datetimepicker({
pickerPosition: "bottom-left"
});
1.git.gif
4.设置初始视图，最小视图，最大视图
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
startView: "year", //初始化视图是‘年’
minView: "month",//最精确视图为'月'
maxView: "decade"//最高视图为'十年'
});
1.git.gif
5.跳转到当天
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
todayBtn:true
});
1.git.gif
6.分钟步长设置
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
minuteStep:1
});
1.git.gif
- 语言设置
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
language:'zh-CN',
});
1.git.gif
7.日期格式
控件支持日期、时间等格式
p : meridian in lower case ('am' or 'pm') - according to locale file
P : meridian in upper case ('AM' or 'PM') - according to locale file
s : seconds without leading zeros
ss : seconds, 2 digits with leading zeros
i : minutes without leading zeros
ii : minutes, 2 digits with leading zeros
h : hour without leading zeros - 24-hour format
hh : hour, 2 digits with leading zeros - 24-hour format
H : hour without leading zeros - 12-hour format
HH : hour, 2 digits with leading zeros - 12-hour format
d : day of the month without leading zeros
dd : day of the month, 2 digits with leading zeros
m : numeric representation of month without leading zeros
mm : numeric representation of the month, 2 digits with leading zeros
M : short textual representation of a month, three letters
MM : full textual representation of a month, such as January or March
yy : two digit representation of a year
yyyy : full numeric representation of a year, 4 digits
常用日期选择
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
startView:'year',
maxView:'year',
minView:'month',
autoclose:true,
pickerPosition: "bottom-left",
language:'zh-CN',
});
1.git.gif
常用时间选择
$(".form_datetime").datetimepicker({
format:'hh:ii',
startView:'day',
maxView:'day',
minView:'hour',
minuteStep:1,
autoclose:true,
pickerPosition: "bottom-left",
language:'zh-CN',
});
1.git.gif
