ホームページ > ウェブフロントエンド > フロントエンドQ&A > bootstrap-datepicker の使用法は何ですか

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

WBOY
リリース: 2022-05-05 17:49:34
オリジナル
3238 人が閲覧しました

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

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

このチュートリアルの動作環境: 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(){
         $(&#39;#datetimepicker&#39;).datetimepicker({
           language:"zh-CN",    //语言选择中文
           format:"yyyy-mm",    //格式化日期
           timepicker:true,     //关闭时间选项
           yearEnd:2050,        //设置最大年份
           todayButton:false    //关闭选择今天按钮
           autoclose: 1,        //选择完日期后,弹出框自动关闭
           startView:3,         //打开弹出框时,显示到什么格式,3代表月
           minView: 3,          //能选择到的最小日期格式
    });
ログイン後にコピー

単純なケースを 2 つ挙げます

年と月のみを表示します

$(&#39;#datetimepicker&#39;).datetimepicker({
         language:"zh-CN",
         format:&#39;yyyy-mm&#39;,
         autoclose: 1,
         startView:3, 
         minView: 3,
       });
ログイン後にコピー

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

年、月、日を表示します

            language:  &#39;zh-CN&#39;,  
            minView:2,
            autoclose: 1,
            startView:3, 
            format:&#39;yyyy-mm-dd&#39;,
ログイン後にコピー

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

注: カレンダー選択のスタイルに問題がある可能性があります

左側と右側にボタン画像がありません

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

これはブートストラップ バージョンの問題であるはずです。バージョン 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート