StudentUniverse angular date range picker

Code on Github

Raw month picker picker(su-datepicker-month-default)

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.

Default datepicker encompasses the raw month picker logic(su-datepicker-default)

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.

Default date range picker encompasses the raw month picker logic(su-datepicker-range-default)

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 sync
  • 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 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.

Example popup datepicker

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