Otwórz JQuery Datepicker, klikając obraz bez pola wejściowego

Question

Chcę, aby obiekt JQuery Datepicker był otwarty, gdy użytkownik kliknie obraz. Nie ma pola wprowadzania, w którym data pojawi się później; Zamierzam tylko zapisać wprowadzoną datę na serwerze przez Ajax.

Obecnie mam ten kod:

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

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

Ale nic się nie dzieje po kliknięciu na zdjęcie. Próbowałem również zapisać wynik wywołania datepicker() do globalnego var, a następnie wywołać datepicker ("show") z zdarzenia onclick() obrazu, ale ten sam wynik.

Answer 1

Okazuje się, że proste pole wejściowe ukryte spełnia swoje zadanie:

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

a następnie użyć atrybutu buttonImage dla obrazu, jak normalny:

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

Początkowo próbowałem polu tekstowym, a następnie ustawić display:none styl na nim, ale to spowodowane kalendarz wychodzić z górnej części przeglądarki, a nie skąd clic użytkownika ked. Ale ukryte pole działa zgodnie z oczekiwaniami.

Answer 2

Dokumentacja jQuery Datepicker mówi, że musi być dołączony do rozpiętości lub DIV, gdy nie jest związany z pola. Można zrobić coś takiego:

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

Answer 3

HTML:

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

KOD:

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

Answer 4

Jeśli używasz pole wejściowe i ikony (jak ten przykład):

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

można załączyć datepicker do twojej ikony (w moim przypadku wewnątrz znacznika A za pomocą CSS) w ten sposób:

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

Answer 5

Aby zmienić „...”, gdy wskaźnika myszy na ikonie kalendarza, należy dodać następujące w opcjach datepicker:

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

Answer 6

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

Powyższy kod należący do this link

Answer 7

Posiadanie ukrytego pola wprowadzania prowadzi do problemów z pozycjonowaniem okna datepicker (okno dialogowe jest wyśrodkowane w poziomie). Możesz zmienić margines okna dialogowego, ale jest lepszy sposób.

Po prostu utwórz pole wejściowe i "ukryj" je, ustawiając krycie na 0 i zwiększając szerokość 1px. Ustaw także go w pobliżu (lub pod) przycisku lub w dowolnym miejscu, w którym chcesz umieścić datepicker.

Następnie dołącz datepicker do "ukrytego" pola wprowadzania i pokaż go, gdy użytkownik naciśnie przycisk.

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

Uwaga: nie testowane ze wszystkimi przeglądarkami.

Answer 8

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

wystarczy, że dodasz ten kod do kliknięcia obrazu lub innego zdarzenia kliknięcia znacznika html. Odbywa się to poprzez zainicjowanie funkcji datepicker po kliknięciu wyzwalacza.