Make the jQuery UI Datepicker use a jQuery Button

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 🙂

4 thoughts on “Make the jQuery UI Datepicker use a jQuery Button

  1. Iñigo

    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.

    Reply
  2. Robert Mullaney Post author

    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 😉

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *