如何使用bootstrap實現年月日的時間選擇

bootstrap是當下比較流行的前端開發框架,功能比較強大,可以實現頁面大部分的效果。下面介紹如何使用bootstrap實現年月日的時間選擇。

工具/原料

代碼下載地址:https://pan.baidu.com/s/1Jj80vcQlmAhgAzyf4YRB9Q 提取碼: sw75

實現步驟

使用bootstrap實現時間選擇,頁面需要加載以下文件:

1、CSS文件:bootstrap.min.css、bootstrap-datetimepicker.min.css

2、JS文件:jquery-1.8.3.min.js、bootstrap.min.js、bootstrap-datetimepicker.js、bootstrap-datetimepicker.zh-CN.js

使用bootstrap實現年份的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

language:  'zh-CN',

minView: 4,         format: 'yyyy',

startDate:2019,

autoclose: 1,

startView: 4,

});

</script>

實現的效果如下:

使用bootstrap實現月份的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

format: 'mm',

autoclose:true,

startView:3,

minView:3,

maxView:3,

initialDate:new Date(),

language:'zh-CN'

});

</script>

實現的效果如下:

使用bootstrap實現年月的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

format: 'mm',

autoclose:true,

startView:3,

minView:3,

maxView:3,

initialDate:new Date(),

language:'zh-CN'

});

</script>

實現的效果如下:

使用bootstrap實現年月日的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

format: 'yyyymmdd',

weekStart: 1,

autoclose: true,

startView: 2,

minView: 2,

language:'zh-CN'

});

</script>

實現的效果如下:

使用bootstrap實現年月日時分秒的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

language : 'zh-CN',

format : 'yyyy-mm-dd hh:ii:ss',

weekStart: 1,

todayBtn:  1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1

});

</script>

實現的效果如下:

使用bootstrap實現小時的選擇。

bootstrap配置代碼如下:

<script type="text/javascript">

$('.form_datetime').datetimepicker({

language : 'zh-CN',

weekStart: 1,

todayBtn:  1,

autoclose: 1,

todayHighlight: 1,

startView: 1,

minView: 0,

maxView: 1,

forceParse: 0

});

</script>

實現的效果如下:

相關文章

  1. jQuery手機端年月日日期時間選擇

    jQuery手機端年月日日期時間選擇 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div class="demo"& ...
  2. EXCEL身份證取年月日(辦公基礎十二秘技之十)

    EXCEL表格在工作中應用廣泛,初入職場的新人需要快速掌握必要的基礎知識.為了幫助大家能夠熟練掌握EXCEL表格基礎方法,特選取編制十二種必要的操作.希望對大家所幫助. EXCEL表格圖片壓縮(辦公基 ...
  3. EXCEL2013利用分列工具提取身份證中的年月日

    EXCEL2013系列教程,利用分列工具提取身份證中的年月日 工具/原料 EXCEL2013 需要提取的身份證號碼 方法/步驟 先上前後對比圖,涉及隱私,我把部分模糊了! 第一步全選身份證的號碼列 第 ...
  4. 【前端框架】bootstrap框架的引入使用

    這是一款開源免費的前端框架,能夠幫助我們很快速的搭建一個頁面,優化代碼,符號w3c標準,並且兼容IE6及以下瀏覽器. 方法/步驟 首先要進入官網,我們直接百度bootstrap,看得有個中文網,進入就 ...
  5. Win7右下角時間欄顯示星期幾正確格式年月日星期

    問題:如果能隨時看到正確的時間格式:年月日星期,那該多好? 下面演示設置方法: 工具/原料 Windows7系統 方法/步驟 (1)滑鼠單擊螢幕右下角的時間 (2)在彈出的菜單單擊"更改日期 ...
  6. wps excel中怎麼輸入顯示年月日時分秒?

    wps excel中怎麼輸入顯示年月日時分秒? 工具/原料 wps excel 方法/步驟 首先打開excel表格,然後輸入年月日,時分秒,選中單元格的時候顯示的是正常的,但是滑鼠移到奇談單元格的時候 ...
  7. 如何用Bootstrap製作輪播圖

    Bootstrap是目前流行的一個很受開發者歡迎的前端框架,它的特點是方便使用.靈活而又簡潔.使用它,我們的開發者們再也不用為繁瑣的前端頁面布局而費盡心思了,從而讓我們的開發效率大大提升.同樣,對於比 ...
  8. bootstrap入門教程,按鈕、按鈕風格、下拉菜單

    bootstrap入門教程,按鈕.按鈕風格.下拉菜單等 本教程演示: bootstrap框架的按鈕.按鈕大小.按鈕風格.按鈕組.下拉菜單製作等. 使用的版本:Bootstrap v2.3.2 . 下面 ...
  9. 如何利用AngularJS和Bootstrap框架獲取table行

    有一張表格,利用Bootstrap設置其樣式,AngularJS獲取表格的數據.根據按鈕點擊事件,獲取表格行數據,然後分別按照列來裝到數組中,並列印數組的結果.下面利用一個實例實現這個場景,操作如下: ...
  10. 07版excel不規範的年月日格式怎麼計算年齡

    公司人力資源一般需要根據員工的出生年月日計算年齡,手工計算比較繁瑣又不能保證準確,需要在excel表格中自動計算,但是萬一年月日格式不規範,我們該怎麼計算呢,這裡教大家一個簡單的方式. 方法/步驟 首 ...
  11. bootstrap教程,快速下載bootstrap

    bootstrap教程,快速下載bootstrap 方法/步驟 搜尋引擎中搜尋bootstrap官網 搜尋結果如下,bootstrap是國外的資源,自然bootstrap中文網就排除,點擊進入下圖紅色 ...
  12. 年月日時間排序

    軟體開放過程中,有事會需要對時間進行排序,比如手機通話記錄等,都是按照撥打電話的時間排序的.那麼下面我將為大家介紹兩種簡單的排序方法 工具/原料 c c++ stl 方法/步驟 定義一個測試結構 st ...
  13. php web中使用bootstrap及ajax實現用戶註冊驗證

    最近自己用php及bootstrap做了一個留言板,中途遇到了怎麼用ajax動態地顯示錶單驗證信息的問題,自己花了一天時間終於搞明白了. 工具/原料 php基礎ajax技術 bootstrap框架 方 ...
  14. 幾種用excel從身份證號碼中提取出生年月日方法

    介紹幾種用excel從身份證號碼中提取出出生年月日的方法.分別會用到MID函數.TEXT函數.DATA函數. 工具/原料 電腦 excel MID函數 TEXT函數 DATA函數 MID函數 我們要用 ...
  15. 怎樣用EXCEL表格中身份證號提取出年月日

    怎樣用EXCEL表格中身份證號提取出年月日,並加上"年.月.日"如2001年1月1日 工具/原料 MS EXCEL 2003 方法/步驟 打開excel電子表格軟體,輸入要編輯的帶 ...
  16. Bootstrap框架的簡單登錄界面設計

    Bootstrap框架的簡單登錄界面設計 方法/步驟 Bootstrap本身的樣式雖然能夠幫助我們快速地開發出一個Web頁面,但要想達到更高的一個層次,我們還需修改並且添加自己的樣式,並配合使用一些其 ...
  17. 毫秒數轉為相應的年月日格式

    在oracle中 毫秒轉換日期: SELECT TO_CHAR(1112070645000 / (1000 * 60 * 60 * 24) + TO_DATE('1970-01-01 08:00:00 ...
  18. 用bootstrap設計按鈕組

    bootstrap不僅提供了很多圖標按鈕,還提供了btn類按鈕風格.按鈕組就是將幾個按鈕合成一個組件.只要用btn-group類和一些<a>或<button>標籤,就可製作按鈕 ...
  19. 用bootstrap製作導航的下拉菜單

    一般網頁導航欄的標題很多時候有下拉菜單選項,在bootstrap框架中可以用導航組件和下拉菜單組件(dropdown)很方便地製作出這個效果. 工具/原料 電腦 代碼編輯器 瀏覽器 方法/步驟 先製作 ...
  20. ThinkPHP 整合bootstrap分頁

    本經驗為Thinkphp分頁樣式修改,整合bootstrap,當然,理解了方法後,想怎麼改都行,第一次發經驗,言不達意,錯誤及不足之處,希望得到建議,如果有疑問可私信 工具/原料 ThinkPHP 3 ...