bootstrap-datepicker の使用法は何ですか

ブートストラップでは、カレンダーと時刻のスタイルを設定するために「bootstrap-datepicker」を使用します。時刻選択プラグインです。構文は「element object.datepicker({attribute: 属性値,...」です。 })" ;時間の表示スタイルは、さまざまな属性を通じて設定できます。

このチュートリアルの動作環境: Windows 10 システム、ブートストラップ バージョン 3.3.7、DELL G3 コンピューター

ブートストラップの使用方法について-datepicker

bootstrap-datepicker は時間選択プラグインですが、デフォルトで表示されるテキスト形式は英語なので、最初に中国語パッケージを導入する必要があります

<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src=&#39;bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js&#39;></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 (土曜日)

startDate

Date デフォルト値: 開始時刻

endDate

Date。デフォルト値: 終了時刻

autoclose

Boolean。デフォルト値: false

日付の選択後にすぐに閉じるかどうか。この日時ピッカー。

startView

数値、文字列。デフォルト値: 2, 'month'

日付と時刻のピッカーの後に最初に表示されるビューは次のとおりです。開いた。使用可能な値:

#0 または時間表示の場合は「hour」

• 1 または日表示の場合は「day」

• #2 または 'month' は月表示です (デフォルト値)

• 3 または 'year' は年表示です

# #4 または 'decade' は 10 年間のビューです
• todayBtn

ブール値、「リンク済み」。デフォルト値: false

この値が true または「リンク」の場合、日付と時刻のピッカー コンポーネントの下部に「今日」ボタンが表示され、現在の日付を選択できます。 true の場合、「今日」ボタンはビューを今日の日付に切り替えるだけです。「リンク」の場合、今日の日付が選択されます。

todayHighlight

ブール値。デフォルト値: false

true の場合、現在の日付を強調表示します。 関連する推奨事項:

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

以上がbootstrap-datepicker の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。