DateTimePicker日時セレクタ

Bootstrapの公式サイトにはDatePickerとTimePickerがあるが、共用はサポートされていないため、あるネットユーザーが両者を結びつけてDateTimePickerプラグインを開発し、年から具体的な時間まで選択することができる.

公式サイト

DateTimePicker

このプラグインはBootstrapのスタイルに依存するため、cssファイルを先に導入する必要があります。

<link href="${ctx }/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

プラグイン自体css/jsファイルの再導入

<link href="${ctx }/assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
<script src="${ctx }/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js" type="text/javascript">script>

国際化が必要な場合は、対応する言語パッケージを導入する必要があります。

<script src="${ctx }/assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript">script>

コンテンツを表示するためのinputを定義します

<input type="text" class="form-control date-time-picker" name="beginTime" readonly>

プラグインの初期化方法の呼び出し

$(".date-time-picker").datetimepicker({
    format: "yyyy-mm-dd hh:ii",
    language: "zh-CN",
    weekStart: 1,
    autoclose: true,
    todayBtn: true,
    todayHighlight: true
});

API

format : mm_dd_yyyy

日時表示のフォーマット

分に関するフォーマットは、mmではなくiiであり、mmと誤記すると、正しい分数

が選択できなくなる.

weekStart : 0

毎週の開始時間

ルールは0-6日曜日から土曜日の

に対応しています.

autoclose : false

日付選択クローズ後自動クローズ選択パネル

startView : 2/month

デフォルト表示のビュー

は、書き込み数または対応する文字列

をサポートする.

0 - hour/1 - day/2 - month/3 - year/4 - decade

minView : 0/hour

が提供できる最も正確な時間

規則startViewと同じ

maxView : 4/decade

が提供できる最大時間

規則startViewと同じ

todayBtn : false

「今日」ボタンがパネルの一番下に表示されます

がtrueの場合、現在の

に日付をジャンプするだけです.

がlinkedの場合、現在の日付

が直接選択されます.

todayHighlight : false

現在の日付

をハイライト

keyboardNavigation : true

サポート方向キー変更日

language : en

国際化サポート

プロパティを変更すると、プラグインのlocalesディレクトリに対応する国際化jsファイル

を導入する必要があります.