This is a low level directive that provides the days of a month with an api for behavior customization.
date
is required and is used to track which month is displayed.click-callback
will be called with the date that was clicked.date-disabled
callback will be called to determine if date is enabled.custom-class
callback will be called to set custom styles.cheap-mouseenter-callback
will be called when a date is hovered. Callback must trigger $digest
manually for performance reasons.cheap-mouseout-callback
is called when the mouse leaves the body of the calendar table. Callback must trigger $digest
.template-url
can be used to specify custom template.This datepicker provides a good base(month change, header, disable past) with sane defaults and many points for customization.
date
is required and is used to track which month is displayed.select-date
callback will be called with the date clicked.is-date-disabled
callback can be used to disable dates.disable-past
attribute can be used as a convinience to disable dates less than today.custom-class
callback can be used to set additional classes on the date.cheap-mouseenter-callback
will be called when a date is hovered. Callback must trigger $digest
manually for performance reasons.cheap-mouseout-callback
is called when the mouse leaves the body of the calendar table. Callback must trigger $digest
.previous-month-disabled
callback can be used to disable the previous month button.next-month-disabled
callback can be used to disable the next month button.header
callback can be used to customize the header text.template-url
can be used to specify custom template.This datepicker shows multiple months allowing custom range selection behavior.
start-date
is required and is used to track which months are displayed. The second month will be kept in syncselect-date
callback will be called with the date clicked.is-date-disabled
callback can be used to disable dates.disable-past
attribute can be used as a convinience to disable dates less than today.custom-class
callback can be used to set additional classes on the date.cheap-mouseenter-callback
will be called when a date is hovered. Callback must trigger $digest
manually for performance reasons.cheap-mouseout-callback
is called when the mouse leaves the body of either calendar table. Callback must trigger $digest
.previous-month-disabled
callback can be used to disable the previous month button.next-month-disabled
callback can be used to disable the next month button.header
callback can be used to customize the header text.template-url
can be used to specify custom template.Logic for opening and closing a datepicker popup is business specific. It's fairly easy to wrap a datepicker in a popup as the following example shows. The popup opens when the date field gets focus either by tabbing or clicking. If either the destination or submit get focus, or there's a click otside the datepicker the popup will close.
Note: because the code is running in an iframe only clicks within the frame will close the popup