【jQuery】.ui-datepicker-calendar は元テキストボックスの子クラスにならない

忘備録です。何か間違ったことがあればすいません、教えてください。

結論はタイトルの通りです。説明します。

何をしようとしたか

datepickerで年月のみを入力するときにカレンダーが必要なかったので、これを非表示にしたい。というのが動機です。

何をしたか

CSSを以下のように記述することで、カレンダーを非表示にできました。

<style>
    .ui-datepicker-calendar {
        display: none !important; /* 年月用のカレンダーを非表示にする */
    }
</style>

しかし、これではすべてのdatepickerでカレンダーが非表示になってしまいます。日付をいれる普通のdatepickerも使いたいので、これでは具合が悪いです。

そこで、テキストボックスに .datepicker-month というクラスを指定し、以下のようなCSSを書いてみました。

<style>
    .datepicker-month .ui-datepicker-calendar {
        display: none !important; /* 年月用のカレンダーを非表示にする */
    }
</style>

こうすると、なにもおきなくなりました。

なぜそうなったか

.ui-datepicker-calendar が .datepicker-month の子になっていないから、です。
どういうことかというと、.datepicker-month は テキストボックスにつけられたクラスであって、そこから作られるカレンダーはその中に入っていないからです。
実際に、検証ツールでHTMLを実際に確認してみると、離れた場所に.ui-datepicker-calendar と .datepicker-month があります。

最後に

ちなみに、Web制作は初めてなのでこれに気づくまでに3時間程度かかりました。
検証ツールやCSSの勉強になったのでよかったです。

最終的にこの方法でいくのはあきらめました。「flatpickr」というものを使うことで解決しました。むしろキレイになったと思います。かるく調べた感じ、jQueryは簡単には年月のみにできなさそうでした。