日期、时间选择控件 - datetimepicker

最新推荐文章于 2024-06-06 10:57:54 发布

→→→→

最新推荐文章于 2024-06-06 10:57:54 发布

阅读量4k

点赞数

分类专栏： JavaScript/JQuery

本文链接：https://blog.csdn.net/zou_yufei/article/details/106021701

版权

JavaScript/JQuery 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

页面上添加控件

<!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

→→→→

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
日期、时间选择控件 - datetimepicker

http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm页面上添加控件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="http://cdn.bootcss.com/twitter-bootstra.
复制链接

扫一扫

专栏目录