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

#!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

#!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

オペレータから
「20080106のように区切り文字無しで入力できるともっと便利」
という提案があり、format文字列を”yyyymmdd”としてみましたが
上手く動作しないようです。

よろしければ次回バージョンアップの際に検討して頂けると嬉しいです。

開発ポリシーとしては、
*サーバーサイドにバリデーションがある前提。
*クライアント側での入力を補助するが、余計なことはしない。
という感じなので、そのような値が入力されたときに値を書き換えるのはやり過ぎだろうし、カレンダーが表示されないというのもイマイチな気がします。これについては検討してみます。
また、入力はカレンダーからのみで良いなら、サンプルの一番下のような使い方がありかと思います。

要望についてもバージョンアップ時に検討させて頂きます！

サンプルを試していて下記の点が気になりました。

　・サンプル：Calendar(Start Year, End Year)
　　カレンダーに連動しているテキストボックスに直接入力することで、
　　カレンダーに設定した選択可能範囲以外の年のカレンダーを
　　表示することができる。
　　ただし、年の選択は設定した範囲しか表示されない。(当たり前か…^^;)

以下、要望です。

　・選択可能な日付範囲を設定できる。

>>saskin さん
ぜひまた何かあれば教えて下さい！