頁(yè)面上添加控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet">
<link 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({});
可以看出，默認(rèn)情況下，控件可以選擇并顯示“年月日時(shí)分”，并且分鐘的步長(zhǎng)是5分鐘，選擇后控件日期選擇器不會(huì)自動(dòng)關(guān)閉；
2.選中后關(guān)閉選擇器
$(".form_datetime").datetimepicker({
autoclose: true
});
3.設(shè)置日期選擇器位置
$(".form_datetime").datetimepicker({
pickerPosition: "bottom-left"
});
4.設(shè)置初始視圖，最小視圖，最大視圖
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
startView: "year", //初始化視圖是‘年’
minView: "month",//最精確視圖為'月'
maxView: "decade"http://最高視圖為'十年'
});
5.跳轉(zhuǎn)到當(dāng)天
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
todayBtn:true
});
6.分鐘步長(zhǎng)設(shè)置
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
minuteStep:1
});
- 語(yǔ)言設(shè)置
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"]
};
$(".form_datetime").datetimepicker({
format:'yyyy-mm-dd',
language:'zh-CN',
});
7.日期格式
控件支持日期、時(shí)間等格式
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',
});
常用時(shí)間選擇
$(".form_datetime").datetimepicker({
format:'hh:ii',
startView:'day',
maxView:'day',
minView:'hour',
minuteStep:1,
autoclose:true,
pickerPosition: "bottom-left",
language:'zh-CN',
});
