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

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

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

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

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

GitHub上開(kāi)源地址：https://github.com/smalot/bootstrap-datetimepicker

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

1、引用JS腳本庫(kù)

<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表示可以使用中文的語(yǔ)言顯示日期時(shí)間

2、引入CSS類庫(kù)

<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、編寫(xiě)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//日期時(shí)間選擇器所能夠提供的最精確的時(shí)間選擇視圖
 }); 
</script>

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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