jquery - jQuery pickadate テーマを変更する方法

Question

こんにちは、 pickadate.jsという jQuery プラグインを使用しています。しかし、テーマを変更する方法がわかりません。デフォルトとクラシックの 2 つのテーマがあります。クラシックに変えたい。

Answer 1

私の目標は、ユーザーがモバイル (既定のテーマ) またはデスクトップ (クラシック テーマ) を使用しているかどうかに応じて、両方のテーマを使用することでした。

それらの .LESS ファイルを変更せずに (バージョンのアップグレードには重要です)、以下のように異なる CSS 名前空間でそれぞれをワープしました-

@import "../bower_components/pickadate/lib/themes-source/_variables.less";
@import "../bower_components/pickadate/lib/themes-source/base.less";
@import "../bower_components/pickadate/lib/themes-source/base.date.less";

body.pickadate--default {
    @import "../bower_components/pickadate/lib/themes-source/default.less";
    @import "../bower_components/pickadate/lib/themes-source/default.date.less";
}
body.pickadate--classic {
    @import "../bower_components/pickadate/lib/themes-source/classic.less";
    @import "../bower_components/pickadate/lib/themes-source/classic.date.less";
}

次に、JavaScript を使用して、画面サイズに応じて本文に CSS クラスを追加/削除します。

var isDesktop = Modernizr.mq('(min-width: 768px)'); //Modernizr media queries

if (isDesktop) {
    $("body").addClass("pickadate--classic");
    $("body").removeClass("pickadate--default");
} else {
    $("body").addClass("pickadate--default");
    $("body").removeClass("pickadate--classic");
}

注: window.resize でも JS 関数を呼び出すようにしてください。