JQuery UI Datepicker: создание ссылки trigger datepicker
Я использую JQuery UI datepicker: http://jqueryui.com/demos/datepicker/
здесь:
http://www.clients.eirestudio.net/old/
Я хочу использовать ссылку в качестве триггера, но я не могу заставить ее работать.
Вот мой код:
// JQuery UI
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy'
});
<p class="clearfix hidden">
<input id="" class="input float datepicker" type="input" name="" value="" />
<a class="calendar ui-icon ui-icon-calendar">Date</a>
<span class="mid-info">To</span>
<input id="" class="input datepicker" type="input" name="" value="" />
<a class="calendar" href="#">Date</a>
</p>
Любые идеи?
Ответы
Ответ 1
Это может помочь кому-то другому.
Я закончил работу с JQuery UI.
Код ниже:
$(".date-pick").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'http://www.example.com/elements/images/calendar.png',
buttonImageOnly: true
});
и я изменил идентификатор datepicker на класс выбора даты
Ответ 2
Вы могли бы сделать что-то вроде эту скрипку
HTML:
<a href="#" id="toggleDP">Toggle</a>
JS:
var $dp = $("<input type='text' />").hide().datepicker({
onSelect: function(dateText, inst) {
$("body").append("<div>Selected "+dateText+"</div>");
}
}).appendTo('body');
$("#toggleDP").button().click(function(e) {
if ($dp.datepicker('widget').is(':hidden')) {
$dp.show().datepicker('show').hide();
$dp.datepicker("widget").position({
my: "left top",
at: "right top",
of: this
});
} else {
$dp.hide();
}
//e.preventDefault();
});
Ответ 3
Я просто решил это очень легко в своем приложении - если у вас открыт ваш датпикер с текстовым полем, вы также можете использовать это решение. Я добавил ссылку $('#date_field').focus()
на значок. Щелкните значок, текстовое поле получает фокус, и это вызывает запуск датпикера. Вуаля.
Ответ 4
Попробуйте использовать:
<a href="javascript:void(0);" onclick="$.datepicker._showDatepicker($('#inputID')[0]);">Text here</a>
<input type="hidden" id="inputID"/>
...
<script type="text/javascript">
$(document).ready(
function()
{
$('#inputID').datepicker();
}
);
</script>
Ответ 5
Основываясь на ответе @camilokawerin, я сделал это, и я нахожу это легким и чистым решением:
HTML:
<a href="#" id="selec">Click</a> <div id="datepicker" style="display:none"></div>
JS:
$("#datepicker").datepicker();
$('#selec').click(function(){
$('#datepicker').toggle();
});
Ответ 6
Из jqueryui кажется, что вы должны добавить showOn
и, возможно, (не знаю, требуется ли) buttonImage
:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'images/calendar.gif', // adapt this to your image
buttonImageOnly: true
});
Ответ 7
С inline datepicker довольно легко сделать это. Проверьте мой JSFiddle.
HTML
<a href="#" class="datepicker">Pick a date</a>
JS
var dpToggler = $('a.datepicker').button(),
dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);
dpToggler.on('click', function(e) {
e.preventDefault();
if (dp.is(':hidden')) {
dp.show().position({
my: 'left top',
at: 'right top',
of: this
});
} else {
dp.hide();
}
});