Bootstrap datetimepicker日期时间插件使用方法(日期时间选择器)

最新推荐文章于 2024-04-10 19:59:36 发布

小流至江河

最新推荐文章于 2024-04-10 19:59:36 发布

阅读量2.5k

点赞数

分类专栏：前端知识文章标签： bootstrap datetimepicker 日期选择插件时间选择插件 datetimepicker 日期时间选择器

本文链接：https://blog.csdn.net/javaYouCome/article/details/83340597

版权

前端知识专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Bootstrap datetimepicker日期时间选择器

1、概述

bootstrap有两种日历插件。datepicker和datetimepicker，后者是前者的拓展，完全可以放弃datepicker，只关注datetimepicker即可，前者能选取到年月日，后者可以选择年月日时分秒。

Bootstrap datetimepicker API官网：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm；

暂时只有datepicker的在线调试，测试网址：https://uxsolutions.github.io/bootstrap-datepicker

注：datepicker插件调用的是.datepicker()方法，datetimepicker插件调用的是.datetimepicker()方法，测试时候注意。

2、开发步骤：

2.1、下载所需datetimepicker的css和js文件，支持中文的js，在下载的文件夹下/js/locales/bootstrap-datetimepicker.zh-CN.js

地址:https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip

2.2、引入文件(自行下载bootstrap和jquery相关文件)：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

2.3、定义文本框，为了防止自定义文本框内容可以在input里加readonly属性。

<input type="text" readonly id="datetimepicker" placeholder="点击编辑时间">

2.4、调用

<script type="text/javascript">
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        language:'zh-CN',//添加中文的js后可以写这个
});
</script>

2.5测试

全部测试代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">
	
        <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

</head>
<body>
	<input type="text" readonly id="datetimepicker" placeholder="编辑时间">
</body>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        language:'zh-CN'
    });
</script>
</html>

3.选项。

format的格式参考:

yyyy-mm-dd
yyyy-mm-dd hh:ii
yyyy-mm-ddThh:ii
yyyy-mm-dd hh:ii:ss
yyyy-mm-ddThh:ii:ssZ

其他选项和API可参考官网的说明或在线测试的地址测试选项

官网：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

在线测试：https://uxsolutions.github.io/bootstrap-datepicker

(完)

小流至江河

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap datetimepicker日期时间插件使用方法(日期时间选择器)

Bootstrap datetimepicker日期时间选择器1、概述bootstrap有两种日历插件。datepicker和datetimepicker，后者是前者的拓展，完全可以放弃datepicker，只关注datetimepicker即可，前者能选取到年月日，后者可以选择年月日时分秒。Bootstrap datetimepicker API官网：http://www.bootc...
复制链接

扫一扫