2016-10-13 3 views
0

を変更するために、再び火にjqueryの日付ピッカーを必要とする、日付ピッカー火災やカレンダーダイアログがきれいに表示されます。しかし、新しい日付に変更するためにテキストボックスの日付を再度クリックすると、同じ日付ピッカーダイアログがポップアップすることはありません。ページがロードされた後iは空のテキストボックス内をクリックすると、日付

マークアップは次のとおりです。ここで

<div id="panelVacationMode" class="row"> 
    <span class="labelCell" title="Skip reminder emails until I return"> 
    <input id="CheckBox1" type="checkbox" name="ctl00$MainContentPlaceHolder$CheckBox1" 
    checked="checked"><label for="CheckBox1">Vacation Mode</label></span> 
    <div id="vacationModeBox" class="vacationRangeCell"> 
     <label for="txtFromDate" id="lblStart">Start:</label> 
      <input name="ctl00$MainContentPlaceHolder$txtFromDate" type="text" 
       value="11/1/2016" maxlength="10" 
       id="txtFromDate" class="dateTextBox" size="8"> 
     <label for="txtToDate" id="lblReturn">Return:</label> 
      <input name="ctl00$MainContentPlaceHolder$txtToDate" type="text" 
       value="12/31/2016" maxlength="10" 
       id="txtToDate" class="dateTextBox" size="8"> 
     <br> 
    </div> 
    <br> 
    <br>  
</div> 

を.aspxページの一番下にあるコードです:

<script> 
    $(function() { 
     // check if checkbox is unchecked 
     if ($("#CheckBox1").is(':checked')) 
      $('#vacationModeBox').show(); 
     else 
      $('#vacationModeBox').hide(); 
     // check if any checkbox has changed state 
     $("input[type='checkbox']").click(function() { 
      $('#txtFromDate').focus(); 
      $("input[type='checkbox']").on('change', function() { 
       if ($(this).not(":checked")) { 
        $('.dateTextBox').val(""); 
        $('#vacationModeBox').toggle(this.checked); 
       } 
       else 
        $('#txtFromDate').focus(); 
     }); 
     $(function() { 
      var date = new Date(); 
      var currentMonth = date.getMonth(); 
      var currentDate = date.getDate(); 
      var currentYear = date.getFullYear(); 
      $("#txtFromDate").datepicker({ 
       numberOfMonths: 2, 
       minDate: new Date(currentYear, currentMonth, currentDate), 
       onSelect: function (selected) { 
        $("#txtToDate").datepicker("option", "minDate", selected) 
       } 

      }); 
      $('#txtToDate').focus(); 
      $("#txtToDate").datepicker({ 
       numberOfMonths: 2, 
       onSelect: function (selected) { 
        $("#txtFromDate").datepicker("option", "maxDate", selected) 
       } 
      }); 
     }); 
    }); 
}); 
</script> 

の更新は14 10月-2016を追加しました:

おそらく私は以下のこれらの参考文献にいくつかの変更を加える必要がありますdatepicker私のために働く元の投稿に記載されていますか? :明確にするために努力

<html> 
<head runat="server"> 
<title></title> 
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css" /> 
<link type="text/css" rel="stylesheet" href="~/IEStyles.css" /> 
<link type="text/css" rel="stylesheet" href="~/StyleSheet1.css" /> 
<link type="text/css" rel="stylesheet" href="~/css/app.css" /> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script> 
<script type="text/javascript" src="<%= ResolveClientUrl("~/js/sitewide.js") %>"></script> 
<asp:ContentPlaceHolder ID="ExtraStyles" runat="server" /> 
</head> 

:私はすでに格納されている日付なしでテキストボックスをクリックしたときには、日付ピッカーのUIを選択するための公開カレンダーとうまく「ポップアップします」。しかし、すでに日付がついているテキストボックスをクリックして新しい日付を選択すると、何も起こりません。 mm/dd/yyyy値をクリアしてからdatepickerをクリックしようとしても、何も起こりません。ここで私は日付ピッカーと対話することはできませんどこのサンプルです: once set to a date, I cannot change

更新10月15日:(最新のフレームワークを使用した後も変化) 次の画面のスニペットは、新しいリソースの使用を示してはまだありません日付ピッカーがために同じ動作をしますOPのように私:私はあなたの全体のソースコードを更新 no response from datepicker if date already present

+0

...それが動作するようですが、あなたはしないでください'$(function(){'ブロックをネストする必要があります。 1つのセットを含むだけで十分です。 –

答えて

1

は... は、今ではそれが重要なことはありません

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<div id="panelVacationMode" class="row"> 
    <span class="labelCell" title="Skip reminder emails until I return"> 
    <input id="CheckBox1" type="checkbox" name="ctl00$MainContentPlaceHolder$CheckBox1" 
    checked='checked'><label for="CheckBox1">Vacation Mode</label></span> 
    <div id="vacationModeBox" class="vacationRangeCell"> 
     <label for="txtFromDate" id="lblStart">Start:</label> 
      <input name="ctl00$MainContentPlaceHolder$txtFromDate" type="text" 
       value="11/1/2016" maxlength="10" 
       id="txtFromDate" class="dateTextBox" size="8"> 
     <label for="txtToDate" id="lblReturn">Return:</label> 
      <input name="ctl00$MainContentPlaceHolder$txtToDate" type="text" 
       value="12/31/2016" maxlength="10" 
       id="txtToDate" class="dateTextBox" size="8"> 
     <br> 
    </div> 
    <br> 
    <br>  
</div> 

<script> 
$(function() { 
      var date = new Date(); 
      var currentMonth = date.getMonth(); 
      var currentDate = date.getDate(); 
      var currentYear = date.getFullYear(); 
      $("#txtFromDate").datepicker({ 
       numberOfMonths: 2, 
       minDate: new Date(currentYear, currentMonth, currentDate), 
       onSelect: function (selected) { 
        $("#txtToDate").datepicker("option", "minDate", selected) 
       } 

      }); 
      $("#txtToDate").datepicker({ 
       numberOfMonths: 2, 
       onSelect: function (selected) { 
        $("#txtFromDate").datepicker("option", "maxDate", selected) 
       } 
      }); 
}); 
$(function() { 
     // check if checkbox is unchecked 
     if ($("#CheckBox1").is(':checked')){ 
      $('#vacationModeBox').show(); 
     $('#txtFromDate').focus(); 
    } 
     else 
      $('#vacationModeBox').hide(); 

     // check if any checkbox has changed state 
    $("input[type='checkbox']").on('change', function() { 
       if ($(this).not(":checked")) { 
        $('.dateTextBox').val(""); 
        $('#vacationModeBox').toggle(this.checked); 
       } 
       if ($(this).is(":checked")){ 
        $('#txtFromDate').focus(); 
     } 
     }); 
}); 
</script> 
+0

見ていただきありがとうございます。私は、コードが動作していることを知っているが、私はあなたが別の日付に(既存の)日付の値を変更したいときにdatepickerダイアログウィジェットを再び表示させる方法をあなたの答えから見ていない。私が求めている動作は、両方のテキストボックス(つまり、両方の日付ピッカー)で動作する必要があります。一言で言えば、私は上記のあなたの回答には "答え"は見当たりません。 –

+0

実際に私のブラウザでは、もう一度日付を選択することができます。両方のボックスで.... すべてが正常に動作しています... ちょうどこの行に一目惚れ..これは問題かもしれません.. 。 IF($(この).NOT(:)「にチェック」){ 私はそれをチェック代わりにされるべきだと思う: を確認それ以外のブラウザを変更してみてください... – sanjeev

+0

あなたはすべての3つのライブラリが含まれていることを確認してくださいコード内のjqueryの.. jquery.min.js jqueryの-ui.min.js と jqueryの-UI-ui.css あなたによって書かれた実際のコードの上にすべてのこれらのライブラリをシフトしてみてください... – sanjeev

関連する問題