住宅ローンシュミレーション 入力画面(2)
前回の入力画面の完成形がこちら。
サンプル
引き続き、入力画面の日付入力。
ローンのシミュレーションをするだけなら、別に日付を入力する必要はありませんが、繰上げ返済や借り換えのシミュレーションをするなら、元々のローンがいつ実行されたのかを入力する必要があります。また、ローンの返済計画表を出力する際に、債務者の年齢が入っていたほうが分かりやすい。
ということで、ローンの返済開始年月と生年月日を入力する為の画面を作成。
もちろん、テキストボックスを3つ並べて、年・月・日と入力してもらってもいいんだけど、折角、jqueryを読み込んでいるんだから、使わない手はありません。
これも自力で作ることなんか到底出来ませんので、いろいろと探してみてたどり着いたのが、
jQuery UI
の、datepicker です。
インターフェイスもスッキリしているし、何より、他にもたくさんの機能があるので即採用。
使用方法もいたって簡単で、上記ホームページから必要はパッケージを選んでダウンロード。その際に自分のホームページのデザインにあったテーマを選んでおけばもっとスッキリ。
あとは、テキストボックスに指定するidを読み込めば完了。
サンプル
引き続き、入力画面の日付入力。
ローンのシミュレーションをするだけなら、別に日付を入力する必要はありませんが、繰上げ返済や借り換えのシミュレーションをするなら、元々のローンがいつ実行されたのかを入力する必要があります。また、ローンの返済計画表を出力する際に、債務者の年齢が入っていたほうが分かりやすい。
ということで、ローンの返済開始年月と生年月日を入力する為の画面を作成。
もちろん、テキストボックスを3つ並べて、年・月・日と入力してもらってもいいんだけど、折角、jqueryを読み込んでいるんだから、使わない手はありません。
これも自力で作ることなんか到底出来ませんので、いろいろと探してみてたどり着いたのが、
jQuery UI
の、datepicker です。
インターフェイスもスッキリしているし、何より、他にもたくさんの機能があるので即採用。
使用方法もいたって簡単で、上記ホームページから必要はパッケージを選んでダウンロード。その際に自分のホームページのデザインにあったテーマを選んでおけばもっとスッキリ。
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
で初期設定終了。あとは、テキストボックスに指定するidを読み込めば完了。
<script type="text/javascript">
$(function(){
$( "#datepicker" ).datepicker();
});
</script>
で、本文ではこんな感じでしょうか。
<input type="text" value="" name="loan_start" id="datepicker" />
コメントする