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”と書いてあったため発見できた。