勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

jQuery UI Datepickerで日本の祝祭日を表示

      2014/07/02

やりたかった事は、jQueryのカレンダーピッカーで
日本の祝祭日の色を変えるというもの。

有名なjQueryUIDatepickerを使用。

■参考サイト
http://0-oo.net/sbox/javascript/google-calendar-holidays

■サンプル
http://sample.taitan916.info/calender2/

■ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>ピッカーで祝日表示</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="./style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script src="./holiday.js"></script>
<script>
$(function(){
$("#calender1,#calender2").datepicker({
changeYear:true,changeMonth:true
});
});
</script>
</head>
<body>
<input type="text" id="calender1"> ~ <input type="text" id="calender2">
</body>
</html>

 - jQuery

  関連記事

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...

テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...

imgタグで作成したグラフをjQueryでリアルタイムに動かす

このグラフをリアルタイムプレビューさせる。 ■サンプル http://sampl ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...