Package Exports

md-date-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (md-date-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

md-date-picker

angular material customizable date picker directive/component

Demo

Live

https://ipiz.herokuapp.com/md-date-picker/demo/index.html

Local

clone repository
npm install
gulp serve

Dependencies

angularjs, angular material

Package	Versions
angular	>=1.4 <=1.6
angular-material	1.x

usage

bower install md-date-picker --save
//or
npm install md-date-picker --save

//module
var app = angular.module('app', ['md-date-picker']);

//options
$scope.specialDaysClass['8/5/2017'] = 'blue-day'; // blue color on saturday 
$scope.specialDaysClass['1/1/2017'] = { // red color on new years day with title
  class: 'red-day',
  title: 'New Year',
};

// sample custom css
.blue-day {
  color: blue;
}
.red-day {
  color: red;
}

<!--default-->
<md-date-picker ng-model="date" on-change="date = $date" placeholder="Select Date"></md-date-picker>
<!--show only days on current month view-->
<md-date-picker current-month-view-dates-only="true" ng-model="date" on-change="date = $date"></md-date-picker>
<!-- with special days calss and promise handling -->
<md-date-picker loading="loading" date-class="specialDaysClass" on-render="onRenderDatePicker($month, $year)" ng-model="date" on-change="date = $date"></md-date-picker>
<!-- customizable date format -->
<md-date-picker ng-model="custom" format="EEE, MMM dd, yyyy" on-change="custom = $date"></md-date-picker>

Attributes

Attributes	Type	Binding	Description
ngModel	Date	One-way binding	Your date object model
onChange	Function	Event	Handle on select date, ussage `on-change="model = $date"`
format	String	attribute	Uses angular date filter to format date `format="EEE, MMM dd, yyyy"` refer to https://docs.angularjs.org/api/ng/filter/date
dateClass	Object	One-way binding	Use to style dates `date-calss="{'12/25/2017':{class: 'red-font'}}"`
loading	Boolean	One-way binding	Use to create overlay on calendar with md-linear-progress
openOnFucos	Boolean	One-way binding	Use open picker when focused
ngRequired	Boolean	One-way binding	Use set the date picker input required
ngDisabled	Boolean	One-way binding	Use set the date picker input disabled
showIcon	Boolean	One-way binding	show calendar icon
placeholder	String	attribute	As input placeholder placeholder="Select Date"
dateFilter	Function	One-way binding	Use as callback function to filter available dates, function should return `false` to be able to disable date. Example enable only Mondays in picker `function isAvailable(date) { return date.getDay() === 1; }`
currentMonthViewDatesOnly	Boolean	Event	Use to toggle displaying other Month dates in a current calendar view
onRender	Function	Event	Trigger when a render of the calendar view happen, mostly on next/prev month clicked or on First render

clone repository and run gulp for demo http://localhost:3000

md-date-picker Screenshot

Todos

Enhancements
Optimizations
Unit Tests

License

MIT

Version 0.0.1