jsでdatepickerのクラスを認識しないときの対処法

テクノロジー

JSを触り始めて、jQueryのdatepickerで少しハマったので対処法をメモ。


【状況】
フォームのinputタグに対して、入力値をリセットするボタンを実装した。
しかし、リセットを行おうとしたが日付が入ったinputタグがリセットされなかった。


【原因】
JSでのクラス名の指定に間違いがあった。


【解決策】
クラス名だけでは指定できず、「クラス名　hasDatepicker」とすればOK。

　　　
以下はコードを抜粋。



HTMLで以下のinputタグを作成した。

<input id="datepicker" class="input_date" type="text" name="var_date" value="{{var_date|default:''}}" placeholder="">

input type="date"でもよかったが、ブラウザによって偏りがあることやJQueryのdatepickerの方がデザインも選べたのでそちらを利用。
そのため今回はinput type="text"とした。



以下はJSの記述。
リセットボタンが押された際にclearElementのfunctionが実行される。
クラス名が当てはまった場合に、日付を現在日付に初期化するコード。

・間違いのパターン

function clearElement(element) {
    switch(element.type) {
        case "text":
            element.value = "";
            if (element.className == "input_date") {
              $('.input_date').datepicker();
              $('.input_date').datepicker('setDate', new Date());
            }
            return;
    }
}

if文の条件にクラス名であるinput_dateのみを記述していたため、if文の中に入らなかった。

element.className == "input_date"



・解決したパターン

function clearElement(element) {
    switch(element.type) {
        case "text":
            element.value = "";
            if (element.className == "input_date hasDatepicker") {
              $('.input_date').datepicker();
              $('.input_date').datepicker('setDate', new Date());
            }
            return;
    }
}


if文のクラス名に"input_date hasDatepicker"と記述。これで入ることができた。

element.className == "input_date hasDatepicker"



【発見方法】
if文の前にdebbuger;を記述して、chromeのデベロッパーツールを使ってデバッグした。
if文の条件に入った際にclassNameの値をチェックしたら”input_date hasDatepicker”と書いてあったため発見できた。


JS、jQueryはまだ初心者の中の初心者なので、まずはデベロッパーツールでデバッグすることに慣れていきたい。