Otwórz jQuery Datepicker klikając na obrazek bez pola wprowadzania
Chcę mieć jQuery Datepicker otwarty, gdy użytkownik kliknie na obraz. Nie ma pola wprowadzania, gdzie wybrana data pojawia się później; mam tylko zamiar 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, gdy klikam na obrazek. 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.
8 answers
Okazuje się, że proste ukryte pole wejściowe wykonuje zadanie:
<input type="hidden" id="dp" />
A następnie użyj atrybutu buttonImage dla swojego obrazu, jak zwykle:
$("#dp").datepicker({
buttonImage: '../images/icon_star.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
Początkowo próbowałem pola tekstowego, a następnie ustawiłem na nim styl display:none
, ale to spowodowało, że kalendarz wyłaniał się z góry przeglądarki, a nie z miejsca, w którym użytkownik kliknął. Ale ukryte pole działa zgodnie z życzeniem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-14 18:47:28
Dokumentacja jQuery mówi, że datePicker musi być dołączony do span lub DIV, jeśli nie jest skojarzony z polem wprowadzania. Mógłbyś 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-10 21:39:03
Jeśli używasz pola wprowadzania i ikony (jak w tym przykładzie):
<input name="hasta" id="Hasta" type="text" readonly />
<a href="#" id="Hasta_icono" ></a>
Możesz dołączyć datepicker do ikony (w moim przypadku wewnątrz znacznika a poprzez CSS) w następujący sposób:
$("#Hasta").datepicker();
$("#Hasta_icono").click(function() {
$("#Hasta").datepicker( "show" );
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-10 15:28:42
Aby zmienić "..."po najechaniu kursorem myszy na ikonę kalendarza, w opcjach datepicker należy dodać następujące elementy:
showOn: 'button',
buttonText: 'Click to show the calendar',
buttonImageOnly: true,
buttonImage: 'images/cal2.png',
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-02 06:59:45
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(); });
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-08 11:12:50
Posiadanie ukrytego pola wejściowego prowadzi do problemów z pozycjonowaniem okna dialogowego datepicker (okno dialogowe jest wyśrodkowane poziomo). 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 zmieniając szerokość na 1px. Umieść go również w pobliżu (lub pod) przycisku lub w dowolnym miejscu, w którym ma się pojawić datepicker.
Następnie dołącz datepicker do" ukrytego " pola wejściowego i pokaż go, gdy użytkownik naciśnie guzik.
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 we wszystkich przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-12 08:36:51
$(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ży do tego linku
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-18 05:07:38
<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 dodać ten kod do kliknięcia obrazka lub innego zdarzenia kliknięcia znacznika html. Odbywa się to poprzez zainicjowanie funkcji datepicker po kliknięciu wyzwalacza.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-10 20:11:30