Bootstrap datepicker日期選擇器插件使用詳解
更新時(shí)間：2017年07月26日 10:13:59 作者：GIS晴天
這篇文章主要為大家詳細(xì)介紹了Bootstrap datepicker日期選擇器插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
bootstrap是與jquery.js文件一起結(jié)合起來(lái)一起用的，缺少任何一個(gè)文件都不可以。
datepicker插件一般用于在文本框中選擇日期，通過(guò)在表中選擇日期，從而將日期顯示在文本框中。因?yàn)閐atepicker.js默認(rèn)是英文的，如果需要顯示中文日期，則需要引入該插件的中文包。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>日期選擇器插件</title>
<!-- bootstrap是基于jquery開發(fā)的，所以通過(guò)bootstrap開發(fā)時(shí)需要引入jquery -->
<!-- 引入bootstrap樣式 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" rel="external nofollow" />
</head>
<body>
<h1>Hello, world!</h1>
<input type="text" id="date1" style="width:200px;height:27px;margin: 20px" placeholder='輸入時(shí)間'>
<!-- 引入jquery.js文件 -->
<script type="text/javascript" src="plugins/jquery-2.2.3.min.js"></script>
<!-- 引入bootstrap.js文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- 引入bootstrap日期選擇器插件文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<!-- 引入bootstrap日期選擇器插件中文包 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript">
$("#date1").datepicker({autoclose:true});//當(dāng)在日期表中選擇完時(shí)間后日期表就會(huì)自動(dòng)關(guān)閉
</script>
</body>
</html>
最后的效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于javascript實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別和年齡
這篇文章主要介紹了基于javascript實(shí)現(xiàn)根據(jù)身份證號(hào)碼識(shí)別性別和年齡的相關(guān)資料,需要的朋友可以參考下2016-01-01
JavaScript創(chuàng)建對(duì)象方法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對(duì)象方法,結(jié)合實(shí)例形式總結(jié)了javascript創(chuàng)建對(duì)象的基本原理及使用工廠模式、構(gòu)造函數(shù)模式與原型模式創(chuàng)建對(duì)象的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-09-09
JavaScript 是世界上最流行的編程語(yǔ)言。javaScript中有五種空值和假值，分別為false，null，undefined，“”，0。從廣義上來(lái)說(shuō)，這五個(gè)值都是對(duì)應(yīng)數(shù)據(jù)類型的無(wú)效值或空值2017-12-12
JavaScript基礎(chǔ)之AJAX簡(jiǎn)單的小demo
這篇文章主要介紹了JavaScript基礎(chǔ)之AJAX簡(jiǎn)單的小demo ，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
JavaScript+Canvas實(shí)現(xiàn)酷炫的粒子和流星效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript和Canvas實(shí)現(xiàn)酷炫的粒子和流星動(dòng)畫效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01
這篇文章主要介紹了js blob類型url的視頻下載問(wèn)題的解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
深入理解JavaScript系列（26）：設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列（26）：設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解,本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎？、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03
提供一個(gè) JS String 包，包含了一些常用的對(duì)字符串操作的函數(shù)，詳細(xì)的請(qǐng)看源碼及演示2010-10-10
這篇文章主要介紹了JavaScript遞歸操作,由一個(gè)階乘問(wèn)題開始分析了遞歸操作的原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-10-10
JS中使用cavas截圖網(wǎng)頁(yè)并解決跨域及模糊問(wèn)題
這篇文章主要介紹了JS中使用cavas截取網(wǎng)頁(yè)并解決跨域以及模糊問(wèn)題 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11