溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么在Bootstrap中使用datepicker日期選擇器插件

發(fā)布時間:2021-03-30 16:38:03 來源:億速云 閱讀:188 作者:Leah 欄目:web開發(fā)

怎么在Bootstrap中使用datepicker日期選擇器插件?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。

datepicker插件一般用于在文本框中選擇日期,通過在表中選擇日期,從而將日期顯示在文本框中。因為datepicker.js默認是英文的,如果需要顯示中文日期,則需要引入該插件的中文包。

例如:

<!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ā)的,所以通過bootstrap開發(fā)時需要引入jquery -->
<!-- 引入bootstrap樣式 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" rel="external nofollow" /> 
</head>
<body>
<h2>Hello, world!</h2>
<input type="text" id="date1"  placeholder='輸入時間'>
<!-- 引入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});//當在日期表中選擇完時間后日期表就會自動關閉
</script>
</body>
</html>

看完上述內(nèi)容,你們掌握怎么在Bootstrap中使用datepicker日期選擇器插件的方法了嗎?如果還想學到更多技能或想了解更多相關內(nèi)容,歡迎關注億速云行業(yè)資訊頻道,感謝各位的閱讀!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI