为图标单击显示日期选择器并用所选日期填充文本框

Question

我想在按钮单击时显示日期选择器，并在 jquery 中用选定的日期填充文本框

$( 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;
         }
         } );

<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 1

您可以在图标上点击.datepicker("show")，如下面的代码 sn-p。

您也可以使用 $('#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>