Problem with Datepicker

Question

I have a datepiker but it’s not working in a good way if I click on input it works cool, but when I click on the calendar image it neither passes the value and also does not receive what is in input:

Imagery:

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();
    });
});

Looks like it’s different from the input text and the calendar:

Answer 1

The datepicker works by default on top of the input so instead of putting it in the image you can just focus on the input field.

Another way to solve is by using the properties of datepicker:

Showon - Sets when the calendar should appear, in the focus of the field, at the click of a button or both.

buttonImage - Receives an image URL to display the calendar when the property ShowOn is as Both or Button.

buttonImageOnly - Sets whether the button image should be rendered by itself, instead of inside an element button this property is only valid if the property is used buttonImage.

Example with properties:

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

Example changing the focus:

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

More information : https://jqueryui.com/datepicker/

Answer 2

There is another way besides the one suggested by @Caique Romero, which would use the option 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>

Follow the link: https://jqueryui.com/datepicker/#icon-Trigger