jQueryUI の datepicker で任意の日付を選択不可にする

予約などの日付を扱うフォームではご要望が多い detapicker ですが、定休日や臨時休業日(年末・年始やお盆など)も反映させたいとのご要望も多く、さらに、その日付設定も自分のところで行いたいとのことでして。。。

日付設定は、管理画面を設けて、データベースに保存させればよいわけですが、そのデータベースに保存された休日一覧を公開ページにある detapicker に反映させる方法を以下に載せます。

ファイル名はなんでもよいのですが、ここでは holidays.php として、直接アクセスすると休日のリストを javascript の配列として出力させるようにします。

var holiday = ["20151114", "20151128", "20151212", "20151226", "20151229", "20151230", "20151231"];

HTML上では、上記の php を読み込みます。

<script src="./holidays.php" type="text/javascript"></script>

あとは datepicker の指定で上記の配列を反映させます。

$(function(){
	var holidayList = holiday;
	$.datepicker.setDefaults( $.datepicker.regional['ja'] );
	$( '.datepicker' ).datepicker({
		numberOfMonths: 2,
		minDate: '+4d',
		maxDate: '+1y',
		dateFormat: 'yy/mm/dd',
		beforeShowDay: function(day){
			var result;
			var dtDay = $.format.date( day, "yyyyMMdd" );
			if( $.inArray( dtDay, holidayList ) != -1 ){
				result = [false];
			} else {
          			result = [true];
			}
			return result;
		}
	});
});
</script>

「var holidayList = holiday;」は、店舗(事務所)毎に異なるケースを踏まえての記述です。

上記は町田市と相模原市に事務所をもつまちだ・さがみ総合法律事務所さんの予約フォームで利用しています。

[mokurenCB]

プルダウンの選択で他の複数のプルダウンも選択させる

1つの select 文の選択で、他の複数の select 文も選択させる。

Ajax と PHP を JSON でつなげて実現。
まずは、HTML 部分

<p>
<select name="color" id="color">
<option value="0">▼選択</option>
<option value="blue">blue</option>
<option value="aqua">aqua</option>
<option value="lime">lime</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="black">black</option>
<option value="white">white</option>
</select> <select name="hex" id="hex">
<option value="0">▼選択</option>
<option value="00f">00f</option>
<option value="0ff">0ff</option>
<option value="0f0">0f0</option>
<option value="ff0">ff0</option>
<option value="f00">f00</option>
<option value="000">000</option>
<option value="fff">fff</option>
</select> <select name="rgb" id="rgb">
<option value="0">▼選択</option>
<option value="0,0,255">0,0,255</option>
<option value="0,255,255">0,255,255</option>
<option value="0,255,0">0,255,0</option>
<option value="255,255,0">255,255,0</option>
<option value="255,0,0">255,0,0</option>
<option value="0,0,0">0,0,0</option>
<option value="255,255,255">255,255,255</option>
</select>
</p>

次に javascript(jQuery) 部分

$(function(){
	$('#color').change(function(){
		$.ajax({
			type:"GET",
			url:"./select.php",
			dataType:"json",
			data:{"color":$("#color").val()},
			success:function(data){
				$('#hex').val( data[0] );
				$('#rgb').val( data[1] );
			}
		});
	});
});

最後に Ajax から呼び出している select.php。

if( isset( $_GET['color'] ) ){
	switch( $_GET['color'] ){
		case 'blue':
			$array = array( '00f', '0,0,255' );
			break;
		case 'aqua':
			$array = array( '0ff', '0,255,255' );
			break;
		case 'lime':
			$array = array( '0f0', '0,255,0' );
			break;
		case 'yellow':
			$array = array( 'ff0', '255,255,0' );
			break;
		case 'red':
			$array = array( 'f00', '255,0,0' );
			break;
		case 'black':
			$array = array( '000', '0,0,0' );
			break;
		case 'white':
			$array = array( 'fff', '255,255,255' );
			break;
		default:
			$array = array( 0, 0 );
	}
} else $array = array( 0, 0 );
echo( json_encode( $array ) );

実際には、HTML の option に並べる値や php で配列にさせる値をデータベース化して使うことが多いでしょう。

[mokurenCB]

時間制御

1月の残り1週間。
昨年末に記事にしようと決めていたのが、あれよあれよと一ヶ月も経ってしまった。
時間の流れがとても速く感じるこの頃です。

さて、一ヶ月前の年末に何を記事にしようかと決めていたのが、タイトルの「時間制御」。
「正月に○○を表示させたい」というご要望が、年末のドタバタに数件届き、その内1~2件は、お話しを持ってきた人が1日の午前0時にアップするというアナログ的なことを実施したのです。

ホームページは、javascript や PHP で時間的な制御ができます(コードは検索してください)。
1月1日~3日の間は「あけましておめでとう」のバナーを自動的に表示・非表示させることは容易です。わざわざ午前0時に作業する必要はありません。

ホームページで時間的な制御を行いたい場合は、前々から準備することが可能です。当日ではなく、事前にご依頼されることを推奨します。

[mokurenCB]

複数ある input type="button" の値を jQuery で取得

複数あるボタンで、どれかボタンをクリックした場合、ページ遷移なしで処理を実行させたい。

そんなご要望があり、いろいろと悩んだ事から、忘れないようここに残しておこうかと。。。

「ページ遷移なし」とのことから、Ajax になるのだけど、検索しても type=”radio”,type=”checkbox”,select の選択値を取得する方法ばかり。。。type=”button” でクリックされたボタンの値を取得する方法が見当たらず。。。
個々のボタンに form タグを付けようか、id を加えようかと試行錯誤した結果が以下のコード。input タグに class を振ったけど ul に id を付けて :button でも。

HTML

<form><ul>
<li><input type="button" name="no" value="1" class="btn"></li>
<li><input type="button" name="no" value="2" class="btn"></li>
<li><input type="button" name="no" value="3" class="btn"></li>
<li><input type="button" name="no" value="4" class="btn"></li>
<li><input type="button" name="no" value="5" class="btn"></li>
</ul></form>

Javascript

$('.btn').click(function(){
	var selectNo = $(this).val();
	alert(selectNo);
}

あとは、ajax で値を送ればOK!

[mokurenCB]

楽しいページ

数日前、私自身も所属している「麻小おやじの会」のページを作成しました。

http://asaoyag.hotcom-cafe.com

jQueryとパララックス

JarallaxというjQueryのプラグインを利用いています。このプラグインは、ページのスクロールにあわせてパーツを動かすものです。言葉で説明するより実際にページをみていただければわかると思います。ちょっと楽しいです。

但し、欠点が! Internet Explorer のバージョンが8以前の場合、動きません。IE9以降が必要です。
また、スマートフォンでの閲覧でもNGです。

近日、上記 Jarallax のようなプラグインの人気は高まっており、Jarallax 以外でも以下のプラグインがあります。デモを覗くと楽しいですよ。「jQuery パララックス」で検索すると多数ヒットします。

サーバー

選択したサーバーは、freeweb。フリーサーバーです。でも、WordPressが使えます。FTP接続でファイルのアップもできます。無料の理由は、各ページ最下部に表示されるテキスト広告1行のみです。

実際に使ってみて、時間帯によりFTP接続によるファイルのアップでエラーになることがあります。混んでいるときなんでしょうねぇ。。。