bootstrap-datetimepicker時間控件

時間 2019-11-12

標籤 bootstrap datetimepicker 時間控件欄目 Bootstarp 简体版

原文原文鏈接

歡迎各類吐槽。javascript

本人小前端，學習過程當中，某日遇到作時間控件的需求，因而無休止的召喚了度娘，發現看不太懂。算是爲本身作個筆記，也便於菜鳥級別的看的懂。css

首先，咱們看看點擊選擇時間的時候的展現頁面吧html

年月日前端

時分上下午 java

小視圖 jquery

咱們將這款日期控件下載下來。百度bootstrap日期控件便可。bootstrap

頁面裏須要的文件有：app

bootstrap.min.css（含有bootstrap 全部css）學習

bootstrap-datetimepicker.min.css（重要，這就是日期控件所需的樣式表）ui

jquery-1.8.3.min.js（其餘版本的jquery也能夠）

bootstrap.min.js（含有bootstrap 全部js）

bootstrap-datetimepicker.js（重要，這就是日期控件所需的js）

locales/bootstrap-datetimepicker.fr.js（重要，這裏是日期控件初始值）

html頁面是這樣滴~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>標題</title>
        <meta name="description" content="" />
        <meta name="author" content="" />
        <link href="bootstrap.min.css" rel="stylesheet" />/*（含有bootstrap 全部css）*/
        <link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />/*（重要，這就是日期控件所需的樣式表）*/
    </head>
    <body>
　   <div>這裏就寫上本身須要的代碼，好比你想要的是一個簡單的輸入框時間控件就寫輸入框的代碼，具體以下幾種樣式介紹</div>　
    <script type="text/javascript" src="jquery.js"></script>/*（重要，依賴jquery）*/
    <script type="text/javascript" src="bootstrap.min.js"></script>/*（含有bootstrap 全部js)*/
    <script type="text/javascript" src="bootstrap-datetimepicker.js"></script>/*（重要，這就是日期控件所需的js）*/
    <script type="text/javascript" src="locales/bootstrap-datetimepicker.fr.js"></script>/*（重要，彈出日曆裏面 顯示的文字 
       bootstrap裏面顯示的是英文 ，觸發後顯示的年月日等的顯示文字，即爲：Jan，feb等等）*/
　　<script type="text/javascript">這裏寫本身的js，調用時間選擇器，也就是激活日期選擇器，即爲下文的js</script>
    </body>

文件引用完了，我們就開始設置日期控件了。

這裏根據不一樣需求，也有不一樣的樣式寫法

第一種是最簡單的輸入框

代碼：

<input type="text" value="2014-09-23 23:05" id="datetimepicker">

js：

$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'      /*此屬性是顯示順序，還有顯示順序是mm-dd-yyyy*/
});

也有這麼寫的

代碼：

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

js：

$('#datetimepicker').datetimepicker();

做爲組件使用的時候

代碼是這樣的

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
       <input size="16" type="text" value="12-02-2012" readonly>
       <span class="add-on"><i class="icon-th"></i></span>
</div>

js：

$('#datetimepicker').datetimepicker();

做爲內聯日期時間選擇器：

代碼是這樣的：

<div id="datetimepicker"></div>

js：

$('#datetimepicker').datetimepicker();

以上的介紹中，js部分是必定要寫在頁面裏的，注意要寫在頁面最後面。（js依賴於jquery和bootstrap等文件）

看到上文出現的藍色文字了沒？沒看到？！好吧，再寫一遍

$('#datetimepicker').datetimepicker({
   format: 'yyyy-mm-dd hh:ii'      /*此屬性是顯示順序，還有顯示順序是mm-dd-yyyy*/
});

看見了吧~裏面的format是什麼東東呢？這就是日期選擇器的參數。有什麼用呢？這是用來設置日期選擇器的一些屬性的。好比我想設置本身想要的時間控件。我但願點擊選擇的時候先顯示月份而不是年份，我想要時間的順序是dd-mm-yyyy，這個時候就須要參數來設置了。下面就來具體看看一些參數設置吧。

format

這個是必需要設置的。

String. 默認值: 'mm/dd/yyyy'

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意組合。

weekStart

Integer. 默認值：0

一週從哪一天開始。0（星期日）到6（星期六）

startDate

Date. 默認值：開始時間

The earliest date that may be selected; all earlier dates will be disabled.

endDate

Date. 默認值：結束時間

The latest date that may be selected; all later dates will be disabled.

daysOfWeekDisabled 一週禁用的日期

String, Array. 默認值: '', []

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: '0,6' or [0,6].

autoclose

Boolean. 默認值：false

當選擇一個日期以後是否當即關閉此日期時間選擇器。

startView

Number, String. 默認值：2, 'month'

日期時間選擇器打開以後首先顯示的視圖。可接受的值：

0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默認值：0, 'hour'

日期時間選擇器所可以提供的最精確的時間選擇視圖。

maxView

Number, String. 默認值：4, 'decade'

日期時間選擇器最高能展現的選擇範圍視圖。

todayBtn

Boolean, "linked". 默認值: false

若是此值爲true 或 "linked"，則在日期時間選擇器組件的底部顯示一個 "Today" 按鈕用以選擇當前日期。若是是true的話，"Today" 按鈕僅僅將視圖轉到當天的日期，若是是"linked"，當天日期將會被選中。

todayHighlight

Boolean. 默認值: false

若是爲true, 高亮當前日期。

keyboardNavigation

Boolean. 默認值: true

是否容許經過方向鍵改變日期。

language

String. 默認值: 'en'

The two-letter code of the language to use for month and day names. These will also be used as the input's value (and subsequently sent to the server in the case of form submissions). Currently ships with English ('en'), German ('de'), Brazilian ('br'), and Spanish ('es') translations, but others can be added (see I18N below). If an unknown language code is given, English will be used.

forceParse

Boolean. 默認值: true

當選擇器關閉的時候，是否強制解析輸入框中的值。也就是說，當用戶在輸入框中輸入了不正確的日期，選擇器將會盡可能解析輸入的值，並將解析後的正確值按照給定的格式format設置到輸入框中。

minuteStep

Number. 默認值: 5

此數值被當作步進值用於構建小時視圖。對於每一個 minuteStep 都會生成一組預設時間（分鐘）用於選擇。

pickerReferer : 不建議使用

String. 默認值: 'default' (other value available : 'input')

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

String. 默認值: 'bottom-right' (還支持 : 'bottom-left')

此選項當前只在組件實現中提供支持。經過設置選項能夠講選擇器放倒輸入框下方。

viewSelect

Number or String. 默認值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')

With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.

showMeridian

Boolean. 默認值: false

This option will enable meridian views for day and hour views.

initialDate

Date or String. 默認值: new Date()

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...

bootstrap日期選擇器的屬性很是多，這也給了用戶較大的選擇性,能夠根據項目的需求定義本身想要的日期控件。

寫了這麼多亂七八糟的，我當時是沒看懂，究竟是怎麼寫的呢？

$(".form_datetime").datetimepicker({
            format:'yyyy-mm-dd',
            autoclose:true,//自動關閉
            minView:2,//最精準的時間選擇爲日期0-分 1-時 2-日 3-月 
            weekStart:0
                        
        });

未完。。。。

相關標籤/搜索

bootstrapdatetimepicker

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。