Öffnen Sie JQuery Datepicker, indem Sie auf ein Bild ohne Eingabefeld klicken

Ich möchte den JQuery Datepicker öffnen, wenn der Benutzer auf ein Bild klickt. Es gibt kein Eingabefeld, in dem das ausgewählte Datum danach angezeigt wird. Ich werde nur das eingegebene Datum über Ajax auf dem Server speichern.

Derzeit habe ich diesen Code:

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

Aber nichts passiert, wenn ich auf das Bild klicke. Ich habe auch versucht, das Ergebnis des Aufrufs von datepicker () in einer globalen Variablen zu speichern und dann datepicker ('show') vom Ereignis onclick () des Bildes aufzurufen, aber das gleiche Ergebnis.

Es stellt sich heraus, dass ein einfaches verstecktes Eingabefeld die Aufgabe erfüllt:

<input type="hidden" id="dp" />

Verwenden Sie dann wie gewohnt das Attribut buttonImage für Ihr Bild:

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

Anfangs habe ich ein Texteingabefeld ausprobiert und dann einen display:noneStil darauf festgelegt, aber dadurch wurde der Kalender oben im Browser angezeigt und nicht dort, wo der Benutzer geklickt hat. Das versteckte Feld funktioniert jedoch wie gewünscht.

In der jQuery-Dokumentation heißt es, dass der datePicker an ein SPAN oder einen DIV angehängt werden muss, wenn er keinem Eingabefeld zugeordnet ist. Sie könnten so etwas tun:

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>

Wenn Sie ein Eingabefeld und ein Symbol verwenden (wie in diesem Beispiel):

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

Sie können den Datepicker wie folgt an Ihr Symbol anhängen (in meinem Fall innerhalb des A-Tags über CSS):

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

Um das "..." zu ändern, wenn Sie mit der Maus über das Kalendersymbol fahren, müssen Sie in den Datumsauswahloptionen Folgendes hinzufügen:

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',

HTML:

<div class="CalendarBlock">
    <input type="hidden">
</div>

CODE:

$CalendarBlock=$('.CalendarBlock');
$CalendarBlock.click(function(){
    var $datepicker=$(this).find('input');
    datepicker.datepicker({dateFormat: 'mm/dd/yy'});
    $datepicker.focus(); });

Ein verstecktes Eingabefeld führt zu Problemen bei der Positionierung des Datumsauswahldialogs (der Dialog ist horizontal zentriert). Sie können den Rand des Dialogfelds ändern, aber es gibt einen besseren Weg.

Erstellen Sie einfach ein Eingabefeld und "verbergen" Sie es, indem Sie die Deckkraft auf 0 setzen und 1p breit machen. Positionieren Sie es auch in der Nähe (oder unter) der Schaltfläche oder an der Stelle, an der der Datums-Picker angezeigt werden soll.

Fügen Sie dann den Datepicker in das "versteckte" Eingabefeld ein und zeigen Sie ihn an, wenn der Benutzer die Taste drückt.

HTML:

<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">

CSS:

#date-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height 30px;
}

#date-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 32px; // height of the button + a little margin
    opacity: 0;
}

JS:

$(function() {
   $('#date-field').datepicker();

   $('#date-button').on('click', function() {
      $('#date-field').datepicker('show');
   });
});

Hinweis: Nicht mit allen Browsern getestet.

$(function() {
   $("#datepicker").datepicker({
       //showOn: both - datepicker will come clicking the input box as well as the calendar icon
       //showOn: button - datepicker will come only clicking the calendar icon
       showOn: 'button',
      //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
      buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      dateFormat: 'dd-mm-yy'
  });
});

Der obige Code gehört zu diesem Link

<img src='someimage.gif' id="datepicker" />
<input type="hidden" id="dp" />

 $(document).on("click", "#datepicker", function () {
   $("#dp").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 'today'}).datepicker( "show" ); 
  });

Sie fügen diesen Code einfach für das Klicken auf ein Bild oder ein anderes Ereignis zum Klicken auf ein HTML-Tag hinzu. Dies erfolgt durch Starten der Datepicker-Funktion, wenn wir auf den Auslöser klicken.