jQuery ui datepickerで入力可能な日付の制限をする

jQuery UIのdatepickerで、入力可能な日付の制限を別に入力された値によって変化させる方法を調べてみた。最初は、選択ボックスの更新時に

$( "#datepicker" ).datepicker({ minDate: '-1m', maxDate: '+1m' });

などと単純に再呼び出しをすれば良いかと思っていたけれど、それでは更新されなかった。そこでマニュアルをよく読んでみると、次の記述の通りsetterのような使い方をしないといけなかった様子(よく読んでいなかっただけ・・・)。

Get or set the maxDate option, after init.
//getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
//setter
$( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );

結果、無事に更新が出来るようになった。そのサンプルはこちら。

2012年1月10日追記

onCloseを利用して日付の選択時にチェックを行うように変更した。例えば、土日のみ/ある特定日のみなど。ある一定期間内での入力制限はできても、同じ事を個別にはできなさそうなので、取りあえずはこんなふうにするしかないのかなあ。

また、ソースコードは次の通り。

[php]




日付取得サンプル

jQuery ui datepickerで入力可能な日付の制限をする


プラン選択
日程選択



[/php]

jqueryを利用して下から上へと動くtickerをつくる

2012年1月27日:ticker.jsを一部変更しました(下記コードのadd/delete部分)。

上下に動くtickerが欲しかったので、練習がてらに作ってみる。

デモ

ファイル一式

ticker.js

[PHP]
$(function() {
//ticker切り替え速度(ms)
var interval = 3000;

//fadeIn/fadeOut速度(ms)
var fadetime = 500;

//移動速度(ms)
var movetime = 1000;

//#tickerの高さを取得
var ticker_height = $(‘#ticker ul li’).height();

//初期設定
$(“#ticker ul li:not(:first)”).css({“opacity”:0}).hide();

function move(){
//setInterval
var tim = setInterval(function(){
//1番目の要素をフェイドアウト
$(“#ticker ul li:first”).animate({“opacity”:0},fadetime);

//2番目の要素をフェイドイン
$(“#ticker ul li:eq(1)”).show().animate({“opacity”:1},fadetime);

//ul全体を上に移動
$(“#ticker ul”).animate({“margin-top”: 0 – ticker_height + “px”},{easing: ‘easeOutBack’, duration: movetime, complete:function(){
//移動終了後、先頭の要素を末尾へ移動し、アニメーションした分だけ下へ移動
//$(“#ticker ul li:first”).appendTo(“#ticker ul”).hide();//20120127 delete
$(“#ticker ul li:first”).appendTo(“#ticker ul”);//20120127 add
$(“#ticker ul”).css(“margin-top”, “0px”);
}
});
},interval);
}

//実行
move();
});
[/PHP]

ticker.css

[PHP]
@charset “utf-8″;

/* basic */
body,h1,p,ul,li {
margin:0;
padding:0;
font-family:”ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;
}

/* ticker */
#ticker {
height:32px;
padding:6px 0 0 6px;
border:1px solid #999;
-webkit-border-radius:3px;
-moz-border-radius:3px;
overflow:hidden;
}

#ticker ul li{
height:24px;/*必須*/
}
[/PHP]

index.html

[PHP]




ticker sample



ticker



[/PHP]

本スクリプトについて、もし参考になるのでしたら改変等を含めて全く自由に使っていただいて構いませんが、利用した事による不利益等につきましては一切責任を追うことは出来ません。あらかじめご了承下さい。