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でページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法
ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
-
jQueryの指定されたイベントを実行する(trigger)
jQueryで $('ID').trigger('click'); というみたこ ...