1.情景展示
使用boostrap时间插件可以实现这样的效果
2.具体操作
第一步：引入对应的js和css
<link type="text/css" rel="stylesheet" href="bootstrap/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="bootstrap/bootstrap-datetimepicker.min.css" /> <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap/bootstrap-datetimepicker.min.js"></script>
一个也不能少
第二步：input标签
<!-- id或者class都行，和js保持一致 --> <input class="form_datetime" name="C201" readonly>
第三步：初始化设置
$(function() {
//中文设置
$.fn.datetimepicker.dates['zh-CN'] = {
days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日" ],
daysMin : [ "日", "一", "二", "三", "四", "五", "六", "日" ],
months : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月",
"十月", "十一月", "十二月" ],
monthsShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月" ],
today : "今天",
suffix : [],
meridiem : [ "上午", "下午" ]
};
// 初始化，设置具体的属性
$(".form_datetime").datetimepicker({
format : 'yyyy-mm-dd',// 日期格式化
startView : 'month',// 初始化视图（进行日期选择时，弹出来的页面）
maxView : 'decade',// 最大视图：十年
minView : 'month',// 最小视图：月
autoclose : true,// 选择完毕，自动关闭
pickerPosition : "bottom-left",// 设置日期选择器位置
language : 'zh-CN',// 语言
todayBtn : true,// 显示当天按钮
});
// 添加默认时间
//$('.form_datetime').datetimepicker('setDate', new Date());
});