ショーの日付ピッカーと、選択した日付

Question

とテキストボックスを埋める私が表示したいボタンのクリックに日付ピッカーを表示するとjQueryで選択した日付と

$(function() { 
 
     \t //today=new Date(1000*today); 
 
     var dateFormat = "mm/dd/yy", 
 
      from = $("#from_filter") 
 
      .datepicker({ 
 
       defaultDate: "+0w", 
 
       changeMonth: false, 
 
       numberOfMonths: 1 
 
      }) 
 
      .on("change", function() { 
 
       to.datepicker("option", "minDate", getDate(this)); 
 
      }), 
 
      to = $("#to_filter").datepicker({ 
 
      defaultDate: "+0w", 
 
      changeMonth: false, 
 
      numberOfMonths: 1 
 
      }) 
 
      
 
      .on("change", function() { 
 
      from.datepicker("option", "maxDate", getDate(this)); 
 
      }); 
 
     function getDate(element) { 
 
      var date; 
 
      try { 
 
      date = $.datepicker.parseDate(dateFormat, element.value); 
 
      } catch(error) { 
 
      date = NULL; 
 
      } 
 
      
 
      return date; 
 
     } 
 
     });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="col-md-4"> 
 
           <span>From</span> 
 
           <div class="replay-in"> 
 
           <input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'> 
 

 
           <span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span> 
 
           </div> 
 
          </div> 
 
          <div class="col-md-4"> 
 
           <span>To</span> 
 
           <div class="replay-in"> 
 
           <input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'> 
 
\t \t \t \t \t \t \t         <span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span> 
 
           </div> 
 
          </div>

をテキストボックスを埋めるためにしたいですアイコンをクリックすると日付ピッカーが表示されます。日付ピッカーはテキストボックスにのみ表示されます。

Answer 1

.datepicker("show")アイコンのクリックは、次のコードスニペットで行うことができます。

代替はあなたにもまず、日付ピッカー

$(function() { 
 
    //today=new Date(1000*today); 
 
    var dateFormat = "mm/dd/yy", 
 
    from = $("#from_filter") 
 
    .datepicker({ 
 
     defaultDate: "+0w", 
 
     changeMonth: false, 
 
     numberOfMonths: 1 
 
    }) 
 
    .on("change", function() { 
 
     to.datepicker("option", "minDate", getDate(this)); 
 
    }), 
 
    to = $("#to_filter").datepicker({ 
 
     defaultDate: "+0w", 
 
     changeMonth: false, 
 
     numberOfMonths: 1 
 
    }) 
 

 
    .on("change", function() { 
 
     from.datepicker("option", "maxDate", getDate(this)); 
 
    }); 
 

 
    function getDate(element) { 
 
    var date; 
 
    try { 
 
     date = $.datepicker.parseDate(dateFormat, element.value); 
 
    } catch (error) { 
 
     date = NULL; 
 
    } 
 

 
    return date; 
 
    } 
 

 
    $('.to_icon').click(function() { 
 
    $('#to_filter').datepicker("show"); 
 
    }); 
 
    $('.from_icon').click(function() { 
 
    $('#from_filter').datepicker("show"); 
 
    }); 
 

 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="col-md-4"> 
 
    <span>From</span> 
 
    <div class="replay-in"> 
 
    <input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'> 
 

 
    <span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span> 
 
    </div> 
 
</div> 
 
<div class="col-md-4"> 
 
    <span>To</span> 
 
    <div class="replay-in"> 
 
    <input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'> 
 
    <span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span> 
 
    </div> 
 
</div>

Answer 2

これを行う方法がありますが開きます$('#to_filter').focus();を使用してテキストボックスに焦点を当ててボタンを作成し、目に見えないタグを作成することができますです。次に、ボタンをクリックして、そのような日時のピクチャを開きます。

HTML

<button id = "btn1">Click Here</button> 

<div id = "divDatePicker"></div> 

JS

$("#divDatePicker").hide(); 

$("#btn1").click(function(){ 

    $("#divDatePicker").toggle(); 
}); 

$("#divDatePicker").datepicker({ 
    onSelect: function(value, date) { 
    //chose date 
    $("#divDatePicker").hide(); 
    } 
}); 

それはあなたのための簡単なコードですが、私はそれはあなたを助けるだと思います。

Answer 3

ここでは、貼り付けと実行の作業コードを示します。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div class="col-md-4"> 
           <span>From</span> 
           <div class="replay-in"> 
           <input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'> 

           <span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span> 
           </div> 
          </div> 
          <div class="col-md-4"> 
           <span>To</span> 
           <div class="replay-in"> 
           <input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'> 
                  <span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span> 
           </div> 
          </div> 

<script> 

$(function() { 
      //today=new Date(1000*today); 
     var dateFormat = "mm/dd/yy", 
      from = $("#from_filter") 
      .datepicker({ 
       defaultDate: "+0w", 
       changeMonth: false, 
       numberOfMonths: 1 
      }) 
      .on("change", function() { 
       to.datepicker("option", "minDate", getDate(this)); 
      }), 
      to = $("#to_filter").datepicker({ 
      defaultDate: "+0w", 
      changeMonth: false, 
      numberOfMonths: 1 
      }) 

      .on("change", function() { 
      from.datepicker("option", "maxDate", getDate(this)); 
      }); 
     function getDate(element) { 
      var date; 
      try { 
      date = $.datepicker.parseDate(dateFormat, element.value); 
      } catch(error) { 
      date = NULL; 
      } 

      return date; 
     } 
     }); 
     $('.from_icon').click(function(){ 
      $("#from_filter").datepicker("show"); 

     }); 
      $('.to_icon').click(function(){ 
      $("#to_filter").datepicker("show"); 

     }); 
</script>