var themeRollerRenderer = {
picker: '<div {popup:start} id="ui-datepicker-div"{popup:end} class="ui-datepicker ui-widget ' +
'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
'<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">' +
'{link:prev}{link:today}{link:next}</div>{months}' +
'{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
'ui-corner-all">{button:clear}{button:close}</div>{popup:end}' +
'<div class="ui-helper-clearfix"></div></div>',
monthRow: '<div class="ui-datepicker-row-break">{months}</div>',
month: '<div class="ui-datepicker-group">' +
'<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">{monthHeader:MM yyyy}</div>' +
'<table class="ui-datepicker-calendar"><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
weekHeader: '<tr>{days}</tr>',
dayHeader: '<th>{day}</th>',
week: '<tr>{days}</tr>',
day: '<td>{day}</td>',
monthSelector: '.ui-datepicker-group',
daySelector: 'td',
rtlClass: 'ui-datepicker-rtl',
multiClass: 'ui-datepicker-multi',
defaultClass: 'ui-state-default',
selectedClass: 'ui-state-active',
highlightedClass: 'ui-state-hover',
todayClass: 'ui-state-highlight',
otherMonthClass: 'ui-datepicker-other-month',
weekendClass: 'ui-datepicker-week-end',
commandClass: 'ui-datepicker-cmd',
commandButtonClass: 'ui-state-default ui-corner-all',
commandLinkClass: '',
disabledClass: 'ui-datepicker-disabled'
};
$('.datepicker').datepick({
alignment: 'bottom',
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: 'dd-mm-yyyy',
renderer: {
picker: '<div class="datepick block-border clearfix form">' +
'<div class="mini-calendar clearfix">' +
'{link:prev}{link:today}{link:next}' +
'{months}' +
'</div>' +
'</div>',
monthRow: '{months}',
month: '<div class="calendar-controls">' +
'{monthHeader:M yyyy}' +
'</div>' +
'<table cellspacing="0">' +
'<thead>{weekHeader}</thead>' +
'<tbody>{weeks}</tbody></table>',
weekHeader: '<tr>{days}</tr>',
dayHeader: '<th>{day}</th>',
week: '<tr>{days}</tr>',
day: '<td>{day}</td>',
monthSelector: '.month',
daySelector: 'td',
rtlClass: 'rtl',
multiClass: 'multi',
defaultClass: 'default',
selectedClass: 'selected',
highlightedClass: 'highlight',
todayClass: 'today',
otherMonthClass: 'other-month',
weekendClass: 'week-end',
commandClass: 'calendar',
commandLinkClass: 'button',
disabledClass: 'unavailable',
}
});
});
And this is some example about Datepicker with other choose:
No comments:
Post a Comment