Como fazer o popup do calendário ao carregar num ícone do calendário?

Question

Como fazer o popup do calendário ao carregar num ícone do calendário?

estou a trabalhar no site no qual quero mostrar o calendário ao carregar no ícone do calendário.

o código HTML que usei para colocar Data de Início e Data de fim são:

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

Declaração Do Problema:

estou a perguntar-me qual é o código js/jquery que tenho de usar para fazer o popup do calendário ao carregar no ícone do calendário à esquerda e à direita (marcado por uma seta na imagem abaixo).

Eu tentei. colocando o seguinte código, mas de alguma forma eu não sou capaz de mostrar o calendário em bater ícone do calendário.

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

0

html css javascript jquery datepicker

Author: flash, 2018-07-10

Source

4 answers

score 2 · Answer 1

À medida que está a usar o 'Bootstrap', recomendo o uso de 'Bootstrap Datepicker' .

No seu site, dê um id aos campos de entrada de data e inicialize como em baixo.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>

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

score 1 · Answer 2

Podes tentar.Bootstrap Datepicker

Https://jsfiddle.net/codeandcloud/acq7t97c/

Ou JQuery Datepicker

Http://jsfiddle.net/klenwell/LcqM7/

score 0 · Answer 3

Parece que estás a usar o datepicker do jQuery?

Está a tentar executar esta linha

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

Mas não tens nenhum elemento com um leitor de identificação.

Tente adicionar o leitor de dados id à sua entrada se quiser que a entrada inteira mude para o leitor de dados ao carregar. Adicionou o leitor de dados id à sua entrada com a classe 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>

score 0 · Answer 4

Apenas um Id para o ícone do calendário e carregue em acção para o ícone correspondente usando javascript

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


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/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>