Bootstrap每天必學(xué)之日期控制

更新時間：2016年03月07日 15:14:43 投稿：lijiao

Bootstrap每天必學(xué)之日期控制，對Bootstrap日期控制感興趣的小伙伴們可以參考一下

一個成熟的框架，日期控制是少不了的，在網(wǎng)上也有很多日期控制可以選擇，而主框架用了bootstrap，日期控制也當(dāng)前要用它自己的，

控件地址：http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

GitHub上開源地址：https://github.com/smalot/bootstrap-datetimepicker

在使用datetimepicker之前，先要經(jīng)過以下幾個步驟

1、引用JS腳本庫

<script src="/Content/bootstraps/js/bootstrap.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/bootstraps/js/bootstrap-datetimepicker.zh-CN.js"></script>

其中bootstrap-datetimepicker.zh-CN.js表示可以使用中文的語言顯示日期時間

2、引入CSS類庫

<link href="/Content/bootstraps/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstraps/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

3、定義HTML標(biāo)簽

<input class="form_datetime form-control" type="text" value="2016-03-07" size="16">

4、編寫datetimepicker事件

<script type="text/javascript">
 $(".form_datetime").datetimepicker({
 format: "yyyy-mm-dd",
 autoclose: true,
 todayBtn: true,
 todayHighlight: true,
 showMeridian: true,
 pickerPosition: "bottom-left",
 language: 'zh-CN',//中文，需要引用zh-CN.js包
 startView: 2,//月視圖
 minView: 2//日期時間選擇器所能夠提供的最精確的時間選擇視圖
 }); 
</script>

注意，有很多朋友都在網(wǎng)上問過，如何只用日期，或者不用時間，因為默認(rèn)情況下，每次使用datetimepicker選擇時，都要選到日間那個級別上，很是不爽，大叔在研究中發(fā)展，使用minView這個參數(shù)解決了這個問題，它相當(dāng)于在控制上，最小的顯示精度，

０表示分鐘（默認(rèn)），１表示小時，而２表示天，我們把值設(shè)為２就不會再出現(xiàn)選擇小時的頁面了！

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS前端導(dǎo)出Excel的方法詳解
最近寫管理端的需求，發(fā)現(xiàn)有一個excel導(dǎo)出的需求，所以正好本文就來和大家分享一下導(dǎo)出excel文件的三種實現(xiàn)方式，感興趣的小伙伴可以了解一下
2023-07-07
js replace替換字符串同時替換多個方法
這篇文章主要介紹了js replace替換字符串同時替換多個方法的相關(guān)資料,需要的朋友可以參考下
2018-11-11
javascript事件冒泡和事件捕獲詳解
最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家。
2015-05-05
深入理解在JS中通過四種設(shè)置事件處理程序的方法
所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調(diào)用時的作用域中執(zhí)行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標(biāo)簽屬性注冊處理程序就是一個例外?？聪旅嫠姆N方式
2017-03-03
JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
詳解使用JWT實現(xiàn)單點登錄（完全跨域方案）
這篇文章主要介紹了詳解使用JWT實現(xiàn)單點登錄（完全跨域方案），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JavaScript創(chuàng)建表格的方法
這篇文章主要為大家詳細(xì)介紹了JavaScript創(chuàng)建表格的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-04-04
操作按鈕懸浮固定在微信小程序底部的實現(xiàn)代碼
在一些購物平臺經(jīng)常需要將商品加入購物車，像加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕都是按鈕懸浮底部的，怎么實現(xiàn)這樣的功能呢？下面小編給大家?guī)砹瞬僮靼粹o懸浮固定在微信小程序底部的實現(xiàn)代碼，一起看看吧
2019-08-08
從javascript語言本身談項目實戰(zhàn)
從javascript語言本身談項目實戰(zhàn)...
2006-12-12
淺談javascript中基本包裝類型
在JavaScript中，和JAVA類似，也提供了對于基本數(shù)據(jù)類型的包裝類型。例如Number、Boolean、String類型。下面我們就來詳細(xì)探討下吧。
2015-06-06