2

Tenho um datepiker porém não está funcionado de maneira correta bom se eu clico no input ele funciona legal, porém quando clico na imagem do calendário ele nem passa o valor e também não recebe o que esta no input:

Imagem:

inserir a descrição da imagem aqui

Html:

 <div class="float-left gutter-right field-wrap">
        <label for="startDatePicker">Data Início</label>
           <span class="input-type-text">
               <input type="text" id="startDatePicker"  name="startDatePicker" class="datePicker hasDatePick" placeholder="Data Início" />
               <a class="calendar-icon with-tip" href="#" id="IconStartDate" title="Calendário">
                 <img src="~/Content/images/icons/fugue/calendar-month.png" width="16" height="16">
               </a>
              </span>
</div>
<div class="float-left gutter-right field-wrap">
    <label for="endDatePicker">Data Fim</label>
       <span class="input-type-text">
         <input type="text" id="endDatePicker"  name="endDatePicker" class="hasDatePick" placeholder="Data Fim" />
           <a class="calendar-icon with-tip" href="#"  id="IconEndDate" title="Calendário">
            <img  src="~/Content/images/icons/fugue/calendar-month.png" width="16" height="16">
            </a>
          </span>
</div>

JS:

 $(document).ready(function () {
    $("#startDatePicker").datepick();
    $("#endDatePicker").datepick();
    $("#IconStartDate").datepick();
    $("#IconEndDate").datepick();

    $("#closeModal").live("click", function () {
        $.modal.current.closeModal();
    });
});

Olha como está diferente o do input text e o calendário:

inserir a descrição da imagem aqui

5
  • 1
    Qual plugin de datepicker é esse?
    – Marco
    Commented 20/09/2017 às 13:52
  • De preferência, tente montar um fiddle pra facilitar na resposta.
    – Marco
    Commented 20/09/2017 às 13:55
  • 1
    Eu perguntei porque está estranho a maneira como você chamou o método, usando .datepick() ao invés de .datepicker().
    – Marco
    Commented 20/09/2017 às 13:58
  • Como eu disse, tente reproduzir o seu problema em um fiddle onde ocorra esse comportamento. Porque pra mim, utilizando o exemplo padrão funciona corretamente. Pode ser algum conflito com outro código ou plugin que você utiliza.
    – Marco
    Commented 20/09/2017 às 14:01
  • Se isso não for jquery-ui, diga que plugin é. Se for, a chamada está errada... Commented 20/09/2017 às 14:02

2 Respostas 2

3

O datepicker trabalha por padrão em cima do input então ao invés de colocá-lo na imagem você pode só dar o foco no campo input.

Outra forma de resolver é utilizando as propriedades do datepicker:

ShowOn - Define quando o calendário deve aparecer, no foco do campo, no clique de um botão ou em ambos.

buttonImage - Recebe a URL de uma imagem para exibir o calendário quando a propriedade ShowOn está como Both ou Button.

buttonImageOnly - Define se a imagem do botão deve ser renderizada por si mesma, em vez de dentro de um elemento button essa propriedade só é valida se utilizado a propriedade buttonImage.

Exemplo com propriedades:

$( "#startDatePicker" ).datepicker({
   showOn: "button",
   buttonImage: "~/Content/images/icons/fugue/calendar-month.png",
   buttonImageOnly: true,
   buttonText: "Selecione a data"
});

Exemplo alterando o foco:

 $(document).ready(function () {
    $(".datePicker").datepicker();
    $("#IconStartDate").on("click", function(){
      $("#startDatePicker").focus();
    })
    $("#IconEndDate").on("click", function(){
      $("#endDatePicker").focus();
    })

    $("#closeModal").on("click", function () {
        $.modal.current.closeModal();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://resources/demos/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="float-left gutter-right field-wrap">
        <label for="startDatePicker">Data Início</label>
           <span class="input-type-text">
               <input type="text" id="startDatePicker"  name="startDatePicker" class="datePicker hasDatePick" placeholder="Data Início" />
               <a class="calendar-icon with-tip datePickerIcon" href="#" id="IconStartDate" title="Calendário">
                 <img src="~/Content/images/icons/fugue/calendar-month.png" width="16" height="16" alt="icon">
               </a>
              </span>
</div>
<div class="float-left gutter-right field-wrap">
    <label for="endDatePicker">Data Fim</label>
       <span class="input-type-text">
         <input type="text" id="endDatePicker"  name="endDatePicker" class="datePicker hasDatePick" placeholder="Data Fim" />
           <a class="calendar-icon with-tip datePickerIcon" href="#"  id="IconEndDate" title="Calendário">
            <img  src="~/Content/images/icons/fugue/calendar-month.png" alt="icon" width="16" height="16">
            </a>
          </span>
</div>

Mais informações : https://jqueryui.com/datepicker/

2
  • funcionou mas ficou sem o css
    – Bruno H.
    Commented 20/09/2017 às 14:09
  • Deu certo so tive que troca o $(".datePicker").datepicker(); para $(".datePicker").datepick();
    – Bruno H.
    Commented 20/09/2017 às 14:19
2

Existe uma outra maneira além da sugerida pelo @Caique Romero, que seria utilizar a opção showOn:

$(document).ready(function() {
  $(".datePicker").datepicker({
    showOn: "both",
    buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date"
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="float-left gutter-right field-wrap">
  <label for="startDatePicker">Data Início</label>
  <span class="input-type-text">
               <input type="text" id="startDatePicker"  name="startDatePicker" class="datePicker hasDatePick" placeholder="Data Início" />
              </span>
</div>
<div class="float-left gutter-right field-wrap">
  <label for="endDatePicker">Data Fim</label>
  <span class="input-type-text">
         <input type="text" id="endDatePicker"  name="endDatePicker" class="datePicker hasDatePick" placeholder="Data Fim" />
          </span>
</div>

Segue o link: https://jqueryui.com/datepicker/#icon-trigger

2
  • 1
    upvote, não sabia dessa propriedade, vou melhorar minha resposta Commented 20/09/2017 às 14:57
  • Sua resposta foi outra maneira de resolver também, acho que está bom. Só postei pra mostrar outra solução.
    – Marco
    Commented 20/09/2017 às 15:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .