ブートストラップにはカレンダー コントロールがありますか?

藏色散人
リリース: 2023-02-10 14:34:52
オリジナル
4581 人が閲覧しました

bootstrap には、「datetimepicker」という名前のカレンダー コントロール、時刻と日付のカレンダー コントロールがあり、ページ上での日付と時刻の入力を簡略化できるブートストラップ コンポーネントです。 datetimepicker コントロールは、日付の選択と形式の設定、および期間の選択コントロールをサポートしており、スクリプトとリンク タグを使用して必要なページに関連ファイルを導入するだけで使用できます。

ブートストラップにはカレンダー コントロールがありますか?

#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。

ブートストラップにはカレンダー コントロールがありますか?

bootstrap には、datetimepicker という名前の時刻と日付のカレンダー コントロールがあります。これは、ページ上での日付と時刻の入力を簡素化できるブートストラップ コンポーネントです。

Bootstrap datetimepicker コントロールの使用法

1. 日付選択と形式設定のサポート

2. 時間選択のサポート

3. 期間選択コントロールのサポート

4. 中国語のサポート

関連するスタイルと js:

     
ログイン後にコピー

例に直接進みましょう。

$(function () { $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD hh:mm', locale: moment.locale('zh-cn') }); }); /*4.17版本一些可能用得到的方法参数*/ /* showClose:true//是否显示关闭 按钮 /*viewMode: 'days',//天数模块展示,months则为以月展示 daysOfWeekDisabled: false,//星期几 禁止选择,参数 [num],多个逗号隔开 calendarWeeks: false,//显示 周 是 今年第几周 toolbarPlacement:'default', //工具摆放的位置,top 则为上,默认为底 showTodayButton:false,//是否工具栏 显示 直达今天天数的 按钮,默认false showClear:false, //是否 工具栏显示 清空 输入框 的按钮。默认false */
ログイン後にコピー

スクリーンショット:

ブートストラップにはカレンダー コントロールがありますか?

## 開始時刻の例:

$(function () { var picker1 = $('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), //minDate: '2016-7-1' }); var picker2 = $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn') }); //动态设置最小值 picker1.on('dp.change', function (e) { picker2.data('DateTimePicker').minDate(e.date); }); //动态设置最大值 picker2.on('dp.change', function (e) { picker1.data('DateTimePicker').maxDate(e.date); }); });
ログイン後にコピー

スクリーンショット:

ブートストラップにはカレンダー コントロールがありますか?

初期化中に、defaultDate を使用してデフォルト時間を指定します。

$('#datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD', locale: moment.locale('zh-cn'), defaultDate: "1990-1-1" });
ログイン後にコピー

もちろん、JS コードを使用して入力ボックスのデフォルト値を制御することもできます。

具体的な例:

     datetimpicker测试        
ログイン後にコピー

ブートストラップにはカレンダー コントロールがありますか?

推奨: 「

ブートストラップ チュートリアル

以上がブートストラップにはカレンダー コントロールがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!