Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想在图标点击上显示日期选择器。日期选择器只显示在文本框上点击

Answer 1

您可以.datepicker("show")点击图标，如下面的代码段所示。

另一种方法是，您也可以使用$('#to_filter').focus();关注文本框，这将打开日期选择器

＆＃13;

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

＆＃13;

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

＆＃13;

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>

显示用于图标的datepicker单击并用选定日期填充文本框

3 个答案: