4

以下のように struts2 jquery plugin s datepicker を使用しています

<sj:datepicker id="frdate" name="training.fromDate" 
            label="From Date (dd-mm-yyyy)" maxDate="0" />

特定の条件でこれを隠したい.私はこのようなjqueryを書いています.

$("#frdate").hide();    //this will hide textbox of datepicker
$("label[for='frdate']").hide();    // this will hide label of datepicker

しかし、日付ピッカーボタンはまだ表示されていますか? jqueryを使用して非表示にする方法は?

The generated html code is:
<tr>
<td class="tdLabel">
    <label for="frdate" class="label">From Date (dd-mm-yyyy):</label></td>
<td><input type="text" name="training.fromDate" value="" id="frdate"/></td>
</tr>

<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery.struts2_jquery_ui.initDatepicker(false);
});
jQuery(document).ready(function () {
var options_frdate = {};
options_frdate.showOn = "both";
options_frdate.buttonImage = "/ONLINE/struts/js/calendar.gif";
options_frdate.maxDate = "0";
options_frdate.jqueryaction = "datepicker";
options_frdate.id = "frdate";
options_frdate.name = "training.fromDate";
     jQuery.struts2_jquery_ui.bind(jQuery('#frdate'),options_frdate);
 });
</script>
4

3 に答える 3

8

日付ピッカーを非表示にするには、次のことが必要です

  • 入力テキスト フィールドから日付ピッカー機能を破棄する
  • 入力テキスト フィールドを非表示にする

日付ピッカーを表示するには、次のことが必要です

  • 入力テキストフィールドを表示
  • 日付ピッカー機能を追加します

これがデモです：http://jsfiddle.net/ezKwN/

function hideIt(){
    $( "#frdate" ).datepicker( "destroy" );
    $( "#frdate" ).hide();
}

function showIt(){
    $( "#frdate" ).show();
    $( "#frdate" ).datepicker();
}

これがStruts2 jQuery datepickerでも機能するかどうかはわかりませんが、うまくいくことを願っています.

ただし、そのタグを使用すると、その機能をページにハードコーディングしていることを考慮してください。動的であることは想定されていません。(上記の解決策が機能しない場合) ユーザーの操作に応じて表示/非表示にする必要がある場合、Struts2 の代わりにネイティブの jQuery 日付ピッカーを使用することを検討する必要があります (動的日付ピッカーのみ)。

編集: 別のオプションとして (すべての日付ピッカーをネイティブ jQuery で再コーディングするよりも影響が小さい)、単にタグを a 内にカプセル化し<div>、div を非表示/表示することができます。

于 2012-11-16T10:54:13.907 に答える
1 
function hideIt(){
  $("#frdate").hide();
  $("label[for='frdate']").hide();
  $("#frdate").datepicker("destroy" );
 }

function showIt(){
  $("#frdate").show();
  $("label[for='frdate']").show();
  $("#frdate").datepicker({
   showOn : "both",
   buttonImage : "/path/struts/js/calendar.gif",
   maxDate : "0",
   jqueryaction : "datepicker",
   id : "frdate",
   name : "training.fromDate"
   });
 }
于 2012-12-20T10:57:03.223 に答える
0

次の 2 つの方法のいずれかを使用して、jquery 日付ピッカーを非表示にできます。

  • 完全に削除します：$('input[type=text]#yourInput').datepicker("destroy");
  • それを隠す：$('input[type=text]#yourInput').datepicker("hide");
    • おそらく非表示にする方が良いので、必要なすべてのパラメーターで再初期化する必要はありません。

必要に応じて、入力を非表示にすることもできます: -$('input[type=text]#yourInput').hide();

于 2013-12-10T17:43:45.017 に答える