ブートストラップでは、カレンダーと時刻のスタイルを設定するために「bootstrap-datepicker」を使用します。時刻選択プラグインです。構文は「element object.datepicker({attribute: 属性値,...」です。 })" ;時間の表示スタイルは、さまざまな属性を通じて設定できます。
このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター
bootstrap-datepicker は時間選択プラグインですが、デフォルトで表示されるテキスト形式は英語なので、最初に中国語パッケージを導入する必要があります
<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script> <script type="text/javascript" src='bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js'></script> <script>
いくつかの基本プロパティの簡単な紹介bootstrap-datepicker の
$(function(){ $('#datetimepicker').datetimepicker({ language:"zh-CN", //语言选择中文 format:"yyyy-mm", //格式化日期 timepicker:true, //关闭时间选项 yearEnd:2050, //设置最大年份 todayButton:false //关闭选择今天按钮 autoclose: 1, //选择完日期后,弹出框自动关闭 startView:3, //打开弹出框时,显示到什么格式,3代表月 minView: 3, //能选择到的最小日期格式 });
単純なケースを 2 つ挙げます
年と月のみを表示します
$('#datetimepicker').datetimepicker({ language:"zh-CN", format:'yyyy-mm', autoclose: 1, startView:3, minView: 3, });
年、月、日を表示します
language: 'zh-CN', minView:2, autoclose: 1, startView:3, format:'yyyy-mm-dd',
注: カレンダー選択のスタイルに問題がある可能性があります
左側と右側にボタン画像がありません
これはブートストラップ バージョンの問題であるはずです。バージョン 2 では表示されますが、バージョン 3 では表示されません。このとき、フォーム コントロール クラス名を
##オプションの例:
weekStart
Integer デフォルト値: 0## を入力すると問題を解決できます。 #週の始まる日。 0 (日曜日) ~ 6 (土曜日)
startDateDate デフォルト値: 開始時刻
endDateDate。デフォルト値: 終了時刻
autocloseBoolean。デフォルト値: false
日付の選択後にすぐに閉じるかどうか。この日時ピッカー。
startView数値、文字列。デフォルト値: 2, 'month'
日付と時刻のピッカーの後に最初に表示されるビューは次のとおりです。開いた。使用可能な値:
#0 または時間表示の場合は「hour」#2 または 'month' は月表示です (デフォルト値)
3 または 'year' は年表示です
この値が true または「リンク」の場合、日付と時刻のピッカー コンポーネントの下部に「今日」ボタンが表示され、現在の日付を選択できます。 true の場合、「今日」ボタンはビューを今日の日付に切り替えるだけです。「リンク」の場合、今日の日付が選択されます。
todayHighlightブール値。デフォルト値: false
true の場合、現在の日付を強調表示します。 関連する推奨事項:
ブートストラップ チュートリアル以上がbootstrap-datepicker の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。