It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon).
$(function() {
$('input[name="some_date_field"]').datepicker({
showOn: 'button'
});
$('button.ui-datepicker-trigger').button({
text: false,
icons: {
primary: 'ui-icon-calendar',
secondary: ''
}
});
});
Note: Since my datepicker button was displayed inside a jQuery-UI Dialog, some extra CSS rules were required to make it look right. You may not need them, but if you end up with a huge unsightly button, adjust the following rules.
button.ui-datepicker-trigger {
font-size: 65% !important;
vertical-align: top !important;
margin-left: 3px !important;
}
Comments and questions are always welcome 🙂
Hello Robert,
I have a problem.
My code is similar this. Two buttons with two datepicker. But the buttons have the last properties:
******
$(function() {
$(‘input[name=”diario”]’).datepicker({
showOn: ‘button’
});
$(‘button.ui-datepicker-trigger’).button({
label: ‘diario’,
icons: {
primary: ‘ui-icon-calendar’,
secondary: ‘ui-icon-triangle-1-s’
}
});
});
$(function() {
$(‘input[name=”semanal”]’).datepicker({
showOn: ‘button’
});
$(‘button.ui-datepicker-trigger’).button({
label: ‘semanal’,
icons: {
primary: ‘ui-icon-calendar’,
secondary: ‘ui-icon-triangle-1-s’
}
});
});
The html:
*****
Any sugestions?
Thanks, and sorry for my bad english.
I don’t see the corresponding html code, but you probably need to wrap the field/button in a span or div like…
<span class="diario-wrapper"><input type="text" name="diario"></span><span class="semanal-wrapper"><input type="text" name="semanal"></span>
and call it like…
$(function() {// add datepickers
$('input[name="semanal"], input[name="diario"]').datepicker({
showOn: 'button'
});
/* initialize buttons */
$('button.ui-datepicker-trigger').button({
icons: {
primary: 'ui-icon-calendar',
secondary: 'ui-icon-triangle-1-s'
}
});
/* set labels */
$('.diario-wrapper button.ui-datepicker-trigger').button('option', 'label', 'diario');
$('.semanal-wrapper button.ui-datepicker-trigger').button('option', 'label', 'semanal');
});
I didn’t test the code. Just showing how I’d do what I think you’re trying to accomplish 😉
Please tell me.. how to set focus to jquery ui datepicker button??
.focus()Don’t forget, this is still just Javsacript and you can use the built-in methods.