タグ: Bootstrap

Vue.js 3 に組み込んだ Bootstrap 5 をカスタマイズできるようにする方法

Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
yarn add sass-loader@^10 sass で依存パッケージをインストールします。ここで @^10 とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLI
src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述する。カスタマイズ内容は、この行よりも上に書くこと。
src/main.js に import "@/scss/custom.scss"; を記述し custom.scss を読み込む。今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除する。

src/main.js に次を追加する。

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Microsoft

標準で日本語対応しているのが嬉しい。
DatePicker のフォーマットは yyyy-mm-dd とし、input date で使用するフォーマットに合わせること。これにより、DatePicker も input type date も両方使用できる。
Chrome や Edge だと input type date も、DatePicker for Bootstrap も両方有効になり、好きな方で操作できる。input type date の yyyy/MM/dd フォーマットで表示された。
Internet Explorer だと DatePicker が効いて yyyy-MM-dd フォーマットで表示される。
input date は IE が対応していないため、後数年もすれば input date で DatePicker と同等のことができるようになるであろう。そうすると、DatePicker for Bootstrap は不要となると思う。

モデルのプロパティの DataType を Date に指定
モデルのプロパティの DisplayFormat の DateFormatString を yyyy-MM-dd に、ApplyFormatInEditMode を true に設定する。
ビューではタグの class に DatePicker 動作用のクラスを追加する。