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>
4 answers
À 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">
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>
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>