jQuery日期选择器点击图标 [英] jQuery datepicker on click of icon

问题描述

我想在点击输入字段内的FontAwesome图标时显示jQuery datepicker。以下是代码：

 < div class =col-md-4 col-sm-4 col-xs-12 > 
< label for =datepicker>出生日期*< / label> 
 < span class =fa fa-calendar>< / span> 
< / div> 
  

jQuery（'。fa （'click'，function（）{
jQuery（this）.datepicker（）。trigger（'focus'）;
}）;


解决方案

试试这个

  $（document）.ready（function（）{
 $（＃datepicker）。datepicker（）; 
 $（'。 （）; 
 $（＃datepicker）。 
  

• 初始化datepicker一次
  ul>
  
  

  以下是示例
  
  

   <$ c $ （）函数（）{$（＃datepicker）。$（（） （）;}）;}）;  

  < link rel =stylesheethref =// code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\"> < link rel =stylesheethref =/ 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> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>< div class = col-md-4 col-sm-4 col-xs-12> < label for =datepicker>出生日期*< / label> < input type =textname ='datepicker'class =form-controlvalue =Select dateid =datepickerng-required =trueplaceholder =MM / DD / YYYY> < span class =fa fa-calendar>< / span>< / div>

  b $ b

  I want to show the jQuery datepicker on click of a FontAwesome icon which is inside the input field. Below is the code:

  <div class="col-md-4 col-sm-4 col-xs-12">
    <label for="datepicker">Date of birth*</label>
    <input type="text" name='datepicker' class="form-control"  value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
    <span class="fa fa-calendar"></span>
  </div>
  

  jQuery('.fa-calendar').on('click' , function() {
    jQuery(this).datepicker().trigger('focus');
  });
  

  解决方案

  Try this

  $(document).ready(function() {
    $("#datepicker").datepicker();
    $('.fa-calendar').click(function() {
      $("#datepicker").focus();
    });
  });
  

  • Initialise datepicker once only

  Here is the example

  $(document).ready(function() {
    $("#datepicker").datepicker();
    $('.fa-calendar').click(function() {
      $("#datepicker").focus();
    });
  });

  <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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="col-md-4 col-sm-4 col-xs-12">
    <label for="datepicker">Date of birth*</label>
    <input type="text" name='datepicker' class="form-control"  value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
    <span class="fa fa-calendar"></span>
  </div>

  这篇关于jQuery日期选择器点击图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！