Как сделать календарь всплывающим при нажатии на значок календаря?

Question

Как сделать календарь всплывающим при нажатии на значок календаря?

0

Я работаю над веб-сайтом, на котором я хочу всплывать в календаре, нажимая значок календаря.

Код HTML, который я использовал для размещения даты начала и окончания даты:

<div class="dates">
   <div class="start_date">
      <input class="form-control start_date mb-4" type="text" placeholder="start date">
      <span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
   </div>
   <div class="end_date">
      <input class="form-control  end_date mb-4" type="text" placeholder="end date">
      <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
   </div>
</div>

Постановка задачи:

Мне интересно, какой код js/jquery нужно использовать для того, чтобы всплывающее окно календаря попало в значок календаря слева и справа (помечено стрелкой на скриншоте ниже).

Я попытался разместить следующий код, но каким-то образом я не могу всплывать в календаре при нажатии на значок календаря.

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

flash 10 июль 2018, в 05:53

Источник

Теги:

javascript

jquery

html

css

datepicker

4 ответа

Ещё вопросы

Vignesh Raja · Answer 1 · 2018-07-10T04-04-00.000Z

Когда вы используете Bootstrap, я рекомендую использовать Bootstrap Datepicker.

На своем сайте дайте id полям ввода даты и выполните инициализацию, как показано ниже.

$(document).ready(function(){
    $("#startdate").datepicker();
    $("#enddate").datepicker();
});

<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>
<script src="/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="/bootstrap.min.css"/>
<link rel="stylesheet" href="/datepicker.css"/>

<input id="startdate">
<input id="enddate">

Я включу ваши файлы в мой домен и сообщу, работает ли он.

Nhat Dinh · Answer 2 · 2018-07-10T00-17-00.000Z

1

Вы можете попробовать Bootstrap Datepicker

https://jsfiddle.net/codeandcloud/acq7t97c/

или JQuery Datepicker

http://jsfiddle.net/klenwell/LcqM7/

Nhat Dinh 10 июль 2018, в 00:17

0

@Nihat Мне интересно, можете ли вы дать мне указатель, как я могу использовать его на главном веб-сайте.
flash 10 июль 2018, в 03:14
0

Включите Bootstrap или JQuery в свой проект и следуйте инструкции примера jsfiddle.
Nhat Dinh 10 июль 2018, в 03:17

Santosh Reddy · Answer 3 · 2018-07-10T04-14-00.000Z

Просто идентификатор значка календаря и нажмите действие на соответствующий значок, используя javascript

        $(document).ready(function() {
          $('#calendar1').click(function(event) {
            $('.start_date').datepicker('show');
          });


          $('#calendar2').click(function(event) {
            $('.end_date').datepicker('show');
          });
        });

<script src="/jquery.min.js"></script>
        <script src="/bootstrap.min.js"></script>
        <script src="/bootstrap-datepicker.js"></script>
        <link rel="stylesheet" href="/bootstrap.min.css" />
        <link rel="stylesheet" href="/datepicker.css" />
        <link rel="stylesheet" href="/font-awesome.min.css">

    <div class="container">
    <div class="row">
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar1">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar2">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
        </div>
        </div>
        </div>
        </div>

Sean · Answer 4 · 2018-07-10T01-54-00.000Z

Похоже, вы используете jQuery datepicker?

Вы пытаетесь выполнить эту строку

$( "#datepicker" ).datepicker();

но у вас нет элемента с id datepicker.

Попробуйте добавить id datepicker к вашему вводу, если вы хотите, чтобы весь ввод изменился на datepicker при щелчке. Добавлен id datepicker для ввода с классом start_date.

<div class="dates">
  <div class="start_date">
    <input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
    <span class="fa fa-calendar start_date_calendar" aria-hidden="true "> 
    </span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date">
    <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
  </div>
</div>

Я поместил ваши изменения в свой домен, но, похоже, он не работает. Я получаю следующую ошибку Uncaught TypeError: $(...).datepicker is not a function at ferhan.ferohost.com/:231 Можете ли вы взглянуть на мой код, какие ошибки я делаю? Вы можете просмотреть мой исходный код, нажав CTRL + U в браузере Chrome, я уверен, что вы это знаете.