jquery Покажчик дати по клацанню значка

Я хочу показати jquery datepicker, натиснувши значок FontAwesome, який знаходиться всередині поля введення. Нижче наведено код:

<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');
});
Valeriu
56173
Edited question 29-го вересня 2021 в 1:28
Rory McCrossan
Edited question 25-го квітня 2017 в 8:21
Програмування
html jquery date datepicker jquery-ui-datepicker
25-го квітня 2017 в 8:19
168 погляди
Рішення

Спробуй це 

$(document).ready(function() {
  $("#datepicker").datepicker();
  $('.fa-calendar').click(function() {
    $("#datepicker").focus();
  });
});
  • Ініціалізуйте datepicker тільки один раз

Ось приклад

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


  <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 col-sm-4 col-xs-12">
  Date of birth*
  <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>
Valeriu
56173
Edited answer 29-го вересня 2021 в 1:28
Abi
Edited answer 26-го квітня 2017 в 9:50
Коментарі (2)

Ви хочете активувати Покажчик дати в полі введення, а не значок, тому вам потрібно змінити 

jQuery(this).datepicker().trigger('focus');`

бувши

jQuery("#datepicker").datepicker().trigger('focus');
Valeriu
56173
Edited answer 29-го вересня 2021 в 1:27
Коментарі (0)

Ви можете використовувати параметр 'Відкрити" в датапікері, щоб програмно відкрити його. Немає необхідності запускати подію "фокус". Вам також необхідно викликати метод 'datepicker () для елемента #datepicker', а не для значка, на який натиснута кнопка. Спробуй це:

jQuery(function($) {
  $('#datepicker').datepicker();

  $('.fa-calendar').on('click', function() {
    $('#datepicker').datepicker('open');
  });
});
Valeriu
56173
Edited answer 29-го вересня 2021 в 1:27
Коментарі (0)

HTML 

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

JS 

jQuery(".fa-calendar").datepicker();

Це те, що ти хочеш зробити. Це буде працювати, ви можете ввести дату в свій тип введення, як показано нижче.

jQuery(".fa-calendar").datepicker().on('changeDate', function(ev){

            jQuery("#datepicker_val").val(ev.date.valueOf());

        }
    });
Valeriu
56173
Edited answer 29-го вересня 2021 в 1:27
TheTom
Edited answer 25-го квітня 2017 в 11:21
Коментарі (0)