Search jQuery

jQuery Forum

Openning Datepicker Using a Link

in Using jQuery UI • 3 months ago

Hi guys,

I want to have a button on my page that opens datepicker. I want it to be this specific button because I put a fair bit of CSS and design into it. Can anyone point me in the right direction?

Replies(3)

kbwood.au

Re: Openning Datepicker Using a Link

3 months ago

Set up the datepicker to respond to a button only and then either hide that button through CSS:

.ui-datepicker-trigger { display: none; }
$('#date').datepicker({showOn: 'button'});

Or specify a one-pixel image:

$('#date').datepicker({showOn: 'button', buttonImageOnly: true, buttonImage: 'img/1px.gif'});

And then trigger the datepicker with the 'show' method:

$('#date').datepicker('show');

ecgcca

Re: Openning Datepicker Using a Link

3 months ago

I can't quite get it to work. Here is my javascript (datetimepicker is just datepicker with the addition of a time panel)

$(function() {
$('#startDate').datetimepicker({
showOn: "button",
closeText: "Close",
changeMonth: true,
changeYear: true,
dateFormat: 'dd MM yy',
duration: 'fast',
firstDay: 1,
onSelect: function(dateStr) {
var date = $(this).datepicker('getDate');
$('#yearS').val(date ? $.datepicker.formatDate('yy', date) : '');
$('#monthS').val(date ? $.datepicker.formatDate('mm', date) : '');
$('#dayS').val(date ? $.datepicker.formatDate('dd', date) : '');
$('#hourS').val(date ? date.getHours() : '');
$('#minuteS').val(date ? date.getMinutes() : '');
}
});
});
$('#startDate').datetimepicker('show');

and the HTML for it is

<a href="#" class="m-btn blue" id="startDate" style="width:30px;">Start</a>

I have no idea what I'm doing wrong

kbwood.au

Re: Openning Datepicker Using a Link

3 months ago

The startDate field is the input field for the date/time. The anchor is separate and triggers the datepicker on the other field:

$(function() {
$('#startDate').datetimepicker({...});
$('#triggerStart').click(function() {
$('#startDate').datetimepicker('show');
});
});
<a href="#" class="m-btn blus" id="triggerStart" style="width: 30px;">Start</a>
<input id="startDate" type="text">

Top Reply

Response title

Attachments

jQuery Forum

Openning Datepicker Using a Link

Replies(3)

Re: Openning Datepicker Using a Link

Re: Openning Datepicker Using a Link

Re: Openning Datepicker Using a Link

Statistics

Tags

Actions

Related Posts