Angular Mighty Datepicker

with by Monterail

View the project on GitHub monterail/angular-mighty-datepicker

JS

HTML

Attributes

  • ng-model: model for datepicker, momentJS object for 'simple' mode, or array of momentJS objects for 'multiple' mode
  • options: object containing options for datepicker
  • markers: array of markers, containing additional data for certain days, marker is object: {day: momentObject, marker: markerObject}
  • after: days after this date are enabled to select
  • before: days before this date are enabled to select
  • range-from: enables highlighting days selected from picked date
  • range-to: enables highlighting days selected to picked date

Options

  • mode: define mode of datepicker, default: 'simple', possible modes: 'simple', 'multiple'
  • start: init datepicker starting from this month
  • months: number of months used in datepicker
  • filter: function for filtering enabled dates, takes day as param, return true if day is selectable
  • callback: callback parameter to fire after selecting day, takes day as parameter
  • markerTemplate: template for ng-bind-template, used to display additional data for marked days, default: "{{ day.marker }}", where 'day' is object from markers array
  • template: string with custom template of picker directive (see test/index.html for example use)

To support IE8 add those polyfills:

  • Array.isArray

Demos

Simple date picker

$scope.date
=> {{date | json}}

Multiple date picker

ng-repeat="day in multi" 
{{ day | json}}

Date picker with markers


Date picker with date and no start

$scope.dateSt
=> {{ dateSt }}

Double datepicker for date range

$scope.dateDbA
=> {{ dateDbA }}
$scope.dateDbB
=> {{ dateDbB }}