2012-03-06 8 views
3

日付選択の日付ピッカー(ポップアップカレンダー)を追加するにはjspjspの日付選択のポップアップカレンダー

私はWebアプリケーションを開発しています。私はjspでカレンダーが欲しいので、ユーザーは日付を入力して検証するのではなく、そのカレンダーから日付を簡単に選択することができます。

答えて

4

ウェブには日付ピッカーがあまりありません。「日付ピッカー」の場合はGoogleだけです。しかし、ここでは、スクリーンショットとリンクを含む開発者http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.htmlの概要を尋ねたので、一目でそれらを比較することができます(そのため、私はそのページが好きです)。使用するには、これらの日付ピッカーの1が依存

  1. JavaScriptフレームワーク:これらのいずれかがすでにアプリケーションで使用される符号化/統合のオーバーヘッドが小さいので、多分、そのフレームワークは、お気に入りのだろう;
  2. ルックアンドフィール:好きなものを選んでください。

JSPでは、入力フィールドは同じままですが、日付フィールドをクリック/入力すると、ポップアップが表示されます。

4

アプリケーションのアーキテクチャに応じて、次のいずれかの方法を選択することができます。

1)例えば「日付ピッカー」JSPタグ)を書き込むサーバ側のアプローチは(、Struts2のフレームワークは、DatePickerのJSPタグがあります。 http://code.google.com/p/struts2-jquery/wiki/DatePickerTag

2)日付ピッカーを表示するJavaScriptのウィジェットを使用してクライアント側のアプローチ() そこに多くのJSウィジェットがそこにいるとあなたが欲しい機能セットの複雑さに応じて1つを選択することができます。 (jqueryプラグイン、dojoともにdatepickersを提供します)

この選択肢を選択すると全体のアプリケーションアーキテクチャを考慮する必要があります。この選択肢は通常、すべてのWebページに影響を与えます(UIでより多くのウィジェットを使用する必要があることがわかります) )

+0

私はそれをgoogledしました。しかし、私は良い日付ピッカーを見つけられませんでした。できればリンクを教えてください。 – adesh

+2

Adesh、dojo/dijit datepickerをご覧ください: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_DateTextBox.html jqueryのUIベースのdatepickerを次のように選択することもできます。 http://jqueryui.com/demos/datepicker/ 個人的に私のアプリケーションでdojo datepickerを正常に使用しました。上記のようなウィジェットを選択する際には、アプリケーションにとって重要な場合は、アクセシビリティ(キーボード、スクリーンリーダー)などを覚えておいてください。また、dojo、jquery ui、extjsなどの専門的に行われているdaterpickersは、通常、ビジュアルデザインごとにテーマ化することができます –

+0

ソースコードを教えてください。私は近くに締め切りをしている。そして私のプロジェクトの多くのことが残されました。私は最終学年の学生です。このようなdatepickerを実装したので、同じソースコードを使用している可能性があります。どうぞ分かりますか? – adesh

-1
add in head javascript code 
<head> 
<script type="text/javascript" lnaguage="javascript"> 
$(function() 
    { 
    $("#datepicker").datepicker(
    { 
    showOn:"both", 
    buttonImage:"image.jpg", 
    dateFormat:"yy-mm-dd", 
    buttonImageOnly:false, 
    minDate:+0, //you do not want to show previous date. 
    maxDate:+0 // you do not want to show next day. 
    }); 
    }); 
</script> 
</head> 
<body> 
<input type="text" name="calendar" id="datepicker"> 
</body> 
関連する問題