Problem with Datepicker

Question

Problem with Datepicker

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have a datepiker but it is not working correctly well if I click on input it works cool, but when I click on the calendar image it neither passes the value nor also receives what is in input :

Image:

Html:

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

Look how the input text and calendar are different:

html jquery datepicker

asked by anonymous 20.09.2017 / 15:25

2 answers

2

There is a way other than that suggested by @Cique 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><scripttype="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><linkrel="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: link

20.09.2017 / 16:31

How to Read this json with PHP How to sum the numeric values inside a String in C?

score 3 · Accepted Answer

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

Another way to resolve this is to use the properties of datepicker:

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

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

buttonImageOnly - Sets whether the button image should be rendered by itself rather than within an element button this property is only valid if the buttonImage property is used.

Example with properties:

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

Example changing 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><scripttype="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><linkrel="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: link