Button Option

Types:

• Function that returns jQuery.
• HTML string.
• jQuery selector.
• DOM element.

Make sure to escape/HTML encode any user (or database) input you pass to this option.

Most JavaScript template engines will HTML encode data passed to the template by default.

Since: 2.5

Default:

// Creates the default button.
Button: function(options) {
    // this refers to the associated input field.
    return $('<span id="MonthPicker_Button_' + this.id + '" class="month-picker-open-button">' + options.i18n.buttonText + '</span>')
        .button({
            text: false,
            icons: {
                // Defaults to 'ui-icon-calculator'.
                primary: options.ButtonIcon
            }
        });
}

Create or assign an existing element as a button that opens the month picker menu. Set to false to hide the button and show the menu upon focus of the text box.

If you just want to use a different icon class name for the default icon see the ButtonIcon option.

Create a button similar to the default button created by jQuery UI Datepicker's showOn: 'both' option.

$('.selector').MonthPicker({
    Button: '<button type="button" class="ui-datepicker-trigger">...</button>'
});

Create a button out of an image.

$('.selector').MonthPicker({
    Button: '<img src="images/calendar.gif" title="Select date" />'
});

Create a button with different images for enabled and disabled state.

$('.selector').MonthPicker({
    Button: function(opts) {
	    var src = 'images/calendar_' + (opts.Disabled ? 'disabled' : 'enabled') + '.gif';
	    return '<img src="' + src + '" title="Select date" />';
    }
});

Create a button using a Handlebars.js template. The same can be done with other popular template engines.

<script id='template' type='text/template'>
<img src="images/{{ButtonIcon}}{{#if Disabled}}-disabled{{/if}}.gif" title="{{i18n.buttonText}}" />
</script>
<script>
$('.selector').MonthPicker({
    Button: Handlebars.compile( $('#template').html() )
});
</script>

Assign an existing element with a class of button that immediately follows the associated input field as a button.

$('.selector').MonthPicker({
    Button: function() {
        return $(this).next('.button');
    }
});

Assign a specific element with the class button.

$('.selector').MonthPicker({
    Button: '.button'
});

Get or set the option, after init.

//getter
var button = $('.selector').MonthPicker('option', 'Button');

//setter (hide the button and show the menu upon focus of the text box).
$('.selector').MonthPicker('option', 'Button', false );

You can create a button out of a new element that will be inserted after the associated input field or pass in an existing element that is already placed somewhere else in the DOM.

When you change the Disabled option the button will be visually disabled if it's a jQuery UI button or if it's a button tag or an input etc...).

If the button is not one of the elements above then you have to disable the element yourself as shown in the example above.