読者です 読者をやめる 読者になる 読者になる

器用貧乏です。はげたかです。日記です。

どうも、はげたかです。今まで器用貧乏に生きてきました。ジェネラリスト・フルスタックエンジニアを目指しています。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

bootstrap-datepickerがうまく動かない

f:id:hagetak:20141225233601j:plain

はじめに

Datepicker for Bootstrap を用いて、日付の処理を行おうとしたが、以下の様な状態になる。

f:id:hagetak:20141226231723p:plain

考えられる原因は、うまくCSSが適用されていない状態であるのかな。

自分なりの見解

コードをよく見ると

<input class=".datepicker" id="date"></input>
$('#date').datepicker({
  format: "yyyy-mm-dd"
});

$('.datepicker').datepicker({
  format: "yyy-mm-dd"
})

となっていた。一つのオブジェクト(?)に2つ以上設定をしてしまうと、エラーが起きるのではないかと考えられる。明らかに自分のミスである...

これは関係なかったが、コードが複雑・汚くなるのでこういうのはやめましょう。

解決方法

スクリプト・コードを読む順番に気をつけること。bootstrap-datepicker.js を読み込み後、設定しなければいけないので、必然的にbootstrap-datepicker.jsの後に書かなければいけない。

自分の場合は、前に書いていたためエラーが起きた。

<script src="bootstrap-datepicker.js"></script>

<script>
$('#date').datepicker({
  format: "yyyy-mm-dd"
});
</script>

先ほど試したら、これで解決した。

bootstrap、jquery、自分のコードと一つのhtml内に含まれるコードが多くなり、関係が複雑になってきている。たくさん間違いをして身につけようと思う。

広告を非表示にする