日付入力コントロールを利用する【拡張】

こないだ紹介した日付入力コントロールを利用する方法だけど、手入力で変な日付を入れられちゃうのがちょっと問題だったり。かといって手入力不可にするとユーザビリティ的にどうなの？って話。そんなわけで、これまたこないだ紹介したフォームの入力を制限する方法と組み合わせることでこの問題を解決してみたり。
簡単におさらいすると、日付入力コントロールを利用する場合はこんなHTMLに対して

<form>
日付：<input name="date1" class="date-pick" />
</form>

Javascriptをこんな風に指定します。

$(document).ready(function(){
  $(".date-pick").datePicker();
});

んで入力制限をしたい場合はJavascriptをこう記述する、と。

$(document).ready(function(){
  $("#date").mask("9999/99/99");
});

ただ両方を単純に組み合わせただけだと、"2007/22/01"とかってありえない日付が入力できちゃう。直接入力した場合も正しい日付にするために、ここではフォーカスが外れた時点で正しい日付に変換する処理を追加してみる（"2007/01/32"なら"2007/02/01"になる、という感じ）。Javascriptはこんな感じかな？

$(document).ready(function(){
    $("input.dateInput").datePicker();
    $("input.dateInput").dpSetStartDate("1900/01/01");       // --- (1)
    $("input.dateInput").blur(function(){
        if ($(this).val() != "") {
            var inputDate = Date.fromString($(this).val());  // --- (2)
            if (!inputDate) {
                $(this).val("");
                $(this).dpSetSelected(new Date().asString(),false,true);  // --- (3)
            } else {
                $(this).val(inputDate.asString());
                $(this).dpSetSelected($(this).val());        // --- (4)
            }
        } else {
            $(this).dpSetSelected(new Date().asString(),false,true);  // --- (5)
        }
    });
    $("input.dateInput").mask("9999/99/99");
});

解説すると、

1. 過去の日付も入力できるように入力可能開始日付を設定。
2. 入力された値を日付に変換。この時点で"2007/01/32"は"2007/02/01"という値に変換される。Date#fromString()はjQueryのサイトで公開されてるdate.jsによるDateオブジェクトの拡張。
3. 日付として変換できなかった場合は、入力値を空にして現在日付をカレンダーのカレントに設定する。
4. 日付として変換できた場合は、文字列として入力値にセットし直す。そしてカレンダーのカレントを入力値に設定する。
5. 入力値が空の場合は (3) と同様にカレンダーのカレントを現在日付に設定する。

という具合。これでそこそこ入力しやすい日付入力コントロールになったんじゃないかと（＾＾