時間入力にも対応した、prototype.js ベースの日付選択用ライブラリ「protocalendar.js」v1.1.0 を公開しました。
開発自体はかなり前に終了していたのですが、ラボの公式サイトのオープンを待っていたら、
前のリリースから1カ月近く経過していたので、先攻してリリースすることにしました。
protocalendar.js v1.1.0
主な変更点は以下の通りです。
【変更点】
*時間入力に対応。
*入力はテキストボックスだけでなく、セレクトタグにも対応。
*大幅なパフォーマンスアップ。
*prototype.js 1.6 に完全対応。（dom:loaded など）
*日本の祝日判定の修正。
*css のレイアウトを修正。
*初期値は当日ではなく空文字に変更。
【使い方はこちら】
http://labs.spookies.co.jp/static/protocalendar-js-1.1.0/sample/calendar_usage.html
【download はこちら】
http://code.google.com/p/protocalendar/downloads/detail?name=protocalendar-js-1.1.0.zip
【今後の展望】
*Appear 以外のエフェクトに対応。
*スタイルの追加。
*「閉じる」、「クリア」を表示するオプションの追加。
*rails, cakephp の helper 作成。
今回のバージョンアップは大きな機能アップが二点あります。
その一つは時間入力に対応したことです。
時間入力はテキストボックスではなく、セレクトタグが良いのではないかという意見もあったのですが、入力のしやすさを追求してテキストボックスにしてみました。
その際、不正な文字を入力されたときのために、簡単なバリデーション（エラー文言を変更可能）が実行されるようになっています。
もう一つはセレクトタグ対応です。
この機能はいかに cakephp の $html->dateTimeOptionTag や rails の date_select に対応するかを考えて設計・開発を進めました。将来的には helper や plugin を提供する予定です。
今後もさらなるバージョンアップを行っていきたいと考えているので、ご意見ご要望などありましたらコメントでお願いします。
もう少しするとラボの公式サイトができて、そちらからスプーキーズラボプロダクトの最新リリースがダウンロードできるようになる予定です。
そちらも公開時にはこのブログでお知らせしますのでよろしくお願いします。
スプーキーズラボブログは株式会社スプーキーズの技術関連の情報を発信するブログです。プロダクト一覧、お問い合わせなどはスプーキーズラボのサイトをご覧ください。
バグ報告はコメントか、お問い合わせからお願いします。
設置サポートは有料でのみ受け付けています。その場合も、お問い合わせからお願いします。
12月 19th, 2007 at 10:35 AM
Hello, thanks for the great work. But the language file lang_zh-tw.js is incorrect. I uploaded the modified one to the following topic:
http://twpug.net/modules/newbb/viewtopic.php?topic_id=3051
12月 19th, 2007 at 5:19 PM
早速、試しております。
要望が取り入れられてうれしい限りです。
12月 20th, 2007 at 11:40 AM
>>kiang さん
thanks!
I will include lang_zh-tw.js in the upcoming version.
>>saskin さん
ぜひまた何かあれば教えて下さい！
12月 20th, 2007 at 7:47 PM
デザインが Cool なトコが Good!!
サンプルを試していて下記の点が気になりました。
・サンプル：Calendar(Start Year, End Year)
カレンダーに連動しているテキストボックスに直接入力することで、
カレンダーに設定した選択可能範囲以外の年のカレンダーを
表示することができる。
ただし、年の選択は設定した範囲しか表示されない。(当たり前か…^^;)
以下、要望です。
・選択可能な日付範囲を設定できる。
12月 21st, 2007 at 1:39 PM
>>type@R さん
ご指摘ありがとうございます。
確かに 11/29/2007 とか入力されると、2007年11月29日のカレンダーが表示されていました。
開発ポリシーとしては、
*サーバーサイドにバリデーションがある前提。
*クライアント側での入力を補助するが、余計なことはしない。
という感じなので、そのような値が入力されたときに値を書き換えるのはやり過ぎだろうし、カレンダーが表示されないというのもイマイチな気がします。これについては検討してみます。
また、入力はカレンダーからのみで良いなら、サンプルの一番下のような使い方がありかと思います。
要望についてもバージョンアップ時に検討させて頂きます！
1月 6th, 2008 at 2:25 PM
こんにちは。
社内の情報照会ページで便利に使わせて頂いており、非常に好評です。
(従来が年月日別のドロップダウンだったので…)
オペレータから
「20080106のように区切り文字無しで入力できるともっと便利」
という提案があり、format文字列を”yyyymmdd”としてみましたが
上手く動作しないようです。
よろしければ次回バージョンアップの際に検討して頂けると嬉しいです。
1月 6th, 2008 at 5:17 PM
>>aruno さん
バグ報告ありがとうございます。
早々に1.1.1のリリースを予定しておりますので、その時に同時に修正します。
好評とのことで非常にうれしいです！
今後ともよろしくおねがいします。
3月 12th, 2008 at 2:13 PM
はじめまして、時間も入力できるとのことで使用したく
cgiに埋め込もうとしていますが。
フォーカスがあたっても、カレンダーが起動しません。
HTMLでは起動されます。
cgiは以下のように記述しました。
ディレクトリーは、cgiの直下に置きました。
環境のように思われますが検討がつきません。
ご教授してください。
#!D:\Perl\bin\perl
select( STDOUT );
$| = 1;
print “Content-Type:text/html\n\n”;
print
protocalendar.js usage
function changeStyle() {
var cssName = $(‘calendar_style_select’).options[$('calendar_style_select').selectedIndex].value;
//alert(‘style changed [' + cssName + '].’);
$(‘calendar_style’).href = ‘../stylesheets/’ + cssName + ‘.css’;
}
Event.observe(window, ‘load’, function() {
Event.observe($(‘calendar_style_select’), ‘change’, changeStyle);
changeStyle();
});
Input Calendar(Datetime)
InputCalendar.createOnLoaded(‘calendar-hm’,
{format: ‘yyyy/mm/dd HH:MM:ss’, enableHourMinute: true, enableSecond: true,lang:’ja’});
EOF
3月 12th, 2008 at 3:39 PM
ソースが切れたようなので再度のコメント
#!D:\Perl\bin\perl
select( STDOUT );
$| = 1;
print “Content-Type:text/html\n\n”;
print
protocalendar.js usage
function changeStyle() {
var cssName = $(‘calendar_style_select’).options[$('calendar_style_select').selectedIndex].value;
//alert(‘style changed [' + cssName + '].’);
$(‘calendar_style’).href = ‘../stylesheets/’ + cssName + ‘.css’;
}
Event.observe(window, ‘load’, function() {
Event.observe($(‘calendar_style_select’), ‘change’, changeStyle);
changeStyle();
});
Input Calendar(Datetime)
InputCalendar.createOnLoaded(‘calendar-hm’,
{format: ‘yyyy/mm/dd HH:MM:ss’, enableHourMinute: true, enableSecond: true,lang:’ja’});
document.observe(‘dom:loaded’, function() {
$$(‘div.sample-code’).each(function(stag) {
var ptag = document.createElement(‘pre’);
ptag.innerHTML = stag.innerHTML.escapeHTML();
stag.insert({after:ptag});
});
});
–>
EOF
3月 12th, 2008 at 3:42 PM
HTMLコードはだめなよーだね
#!D:\Perl\bin\perl
select( STDOUT );
$| = 1;
print “Content-Type:text/html\n\n”;
print
protocalendar.js usage
function changeStyle() {
var cssName = $(‘calendar_style_select’).options[$('calendar_style_select').selectedIndex].value;
//alert(‘style changed [' + cssName + '].’);
$(‘calendar_style’).href = ‘../stylesheets/’ + cssName + ‘.css’;
}
Event.observe(window, ‘load’, function() {
Event.observe($(‘calendar_style_select’), ‘change’, changeStyle);
changeStyle();
});
Input Calendar(Datetime)
InputCalendar.createOnLoaded(‘calendar-hm’,
{format: ‘yyyy/mm/dd HH:MM:ss’, enableHourMinute: true, enableSecond: true,lang:’ja’});
document.observe(‘dom:loaded’, function() {
$$(‘div.sample-code’).each(function(stag) {
var ptag = document.createElement(‘pre’);
ptag.innerHTML = stag.innerHTML.escapeHTML();
stag.insert({after:ptag});
});
});
–>
EOF