My datepicker should only work on the icon

Question

I have the following Code:

$(".datePicker").datepick();
$("#IconDate").on("click", function () {
    $("#Date").focus();
})

My Html:

<div class="float-left gutter-right field-wrap">
    <label for="admissionEndDate">Data Admissão Fim</label>
    <span class="input-type-text">
        <input type="text" id="Date" name="admissionEndDate" class="datePicker hasDatePick" />
        <a href="#" class="datePicker" title="Calendário" id="IconDate">
            <img src="~/Content/images/icons/fugue/calendar-month.png" width="16" height="16" />
        </a>
    </span>
</div>

It is specifying that when you click on the icon the stylized Picker data appears, but when I click on the input it also appears. wasn’t supposed to appear in the input click.

Answer 1

This happens because your datepicker is related to your input and also with the click on its icon. Then you will have to create a trigger in his icon/button, only for it to trigger its datepicker. Link to documentation at the end of the reply. I hope this helps you.

To do it the way you want it will stay that way:

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

// acao do button

$("#myButton").click(function() {
  $("#datepicker").datepicker("show");
});

Link to the related documentation