bootstrap日期控制元件 只顯示 年月

狼魂豹速發表於2020-11-04
boot控制元件

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增匯率')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-rate-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">年月：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="years" class="form-control" placeholder="yyyy-MM" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">幣種：</label>
                <div class="col-sm-8">
                    <select name="currency" class="form-control m-b" th:with="type=${@dict.getType('sem_exchange_currency')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">匯率：</label>
                <div class="col-sm-8">
                    <input name="exchangeRate" class="form-control" type="number" placeholder="請輸入保留四位小數" required >
                </div>
            </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "commerce/rate"
        $("#form-rate-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-rate-add').serialize());
            }
        }

        $("input[name='years']").datetimepicker({
            format: "yyyy-mm",
            minView: 4,
            startView: 3,
            autoclose: true
        });

     /*   $("input[name='years']").datetimepicker({
            format: 'yyyymm',
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 3,
            forceParse: false,
            language: "zh-CN"
        });*/

    </script>
</body>
</html>

頁面裡需要的檔案有：

bootstrap.min.css（含有bootstrap 所有css）

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

jquery-1.8.3.min.js（其他版本的jquery也可以）

bootstrap.min.js（含有bootstrap 所有js）

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

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

html頁面是這樣滴~

標題 /*（含有bootstrap 所有css）*/ /*（重要，這就是日期控制元件所需的樣式表）*/ 　
這裡就寫上自己需要的程式碼，比如你想要的是一個簡單的輸入框時間控制元件就寫輸入框的程式碼，具體如下幾種樣式介紹
　

檔案引用完了，我們們就開始設定日期控制元件了。

這裡根據不同需求，也有不同的樣式寫法

第一種是最簡單的輸入框

程式碼：

js：

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

也有這麼寫的

程式碼：

js：

$(’#datetimepicker’).datetimepicker();

作為元件使用的時候

程式碼是這樣的

js：

$(’#datetimepicker’).datetimepicker();

作為內聯日期時間選擇器：

程式碼是這樣的：

js：

1
$(’#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’ 0,1,2,3,4

日期時間選擇器所能夠提供的最精確的時間選擇檢視。

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

    });

相關文章