顯示日期選擇器的圖標，點擊並填寫文本框，使所選日期

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")，如下面的代碼段所示。

另一種方法是，你還可以集中使用$('#to_filter').focus();這將打開日期選擇器

$(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

有一種方法可以做到這一點的文本框，首先創建一個按鈕，並創建一個無形的標籤。然後點擊按鈕打開日期時間picke，就像那樣;

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>