GoogleAppsScriptでWeb Apps その3(Bootstrap Datepicker)

Bootstrap Datepicker

前回の続きです。

前回の続きです。 前回は公式のGetting startedページの「Basic template」と「Starter...

前回は公式のGetting startedページの「Bootstrap theme」と「Grids」と「Jumbotron」を作成しました。

今回は、Jumbotron TemplateでBootstrap Datepickerを使用します。

使用したバージョンです。

  • Bootstrap 3.3.7
  • Bootstrap Datepicker 1.8.0
  • jQuery 3.3.1

junbotron2.htmlを作成

年月日と年月の2つのパターンを作成しました。

以下のURLにアクセスすると表示されます。

Bootstrap 4.1.1でBootstrap Datepicker を使ってみた

Bootstrap 3.3.7ではなくて、最新のBootstrap 4.1.1で試してみました。

junbotron3.htmlを作成

以下のURLから表示してみましたが

スタイルがおかしいですね。調べたらBootstrap4で廃止されたtable-condensedクラスにcssを適用してました。Bootstrap Datepicker自体がBootstrap3を前提に書かれています。

titleタグの下にcssを追加したら、少しいい感じになりました。

CSS追加後

Bootstrap Datepickerのstandalone.cssを使ってみた

Bootstrap DatepickerのCSSには、bootstrap-datepicker.cssのほかにbootstrap-datepicker.standalone.cssがありました。こちらを指定したらstyleタグを追加しなくてもキレイに表示されました。

bootstrap-datepicker.standalone.css指定バージョン

スポンサーリンク
memordmレクタングル(大)
memordmレクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
memordmレクタングル(大)