# md-date-picker

> Angular Material Customizable Date Picker Directive

Latest version **0.1.4** (published 2019-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install md-date-picker
pnpm add md-date-picker
yarn add md-date-picker
bun add md-date-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-12-06 |
| First published | 2017-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 164 KB |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Roel B |
| Maintainers | ipiz |
| Keywords | angular, md-date-picker, material, directive |

## Links

- npm: https://www.npmjs.com/package/md-date-picker
- Repository: https://github.com/appfoundations/md-date-picker
- Issues: https://github.com/appfoundations/md-date-picker/issues
- npm.io page: https://npm.io/package/md-date-picker

## Dependencies (1)

- [angular](https://npm.io/package/angular.md) ^1.4.14

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2019-12-06
- 0.1.2 — 2019-01-30
- 0.1.0 — 2017-09-29
- 0.0.4 — 2017-09-26
- 0.0.3 — 2017-08-14
- 0.0.2 — 2017-08-14
- 0.0.1 — 2017-08-03

## README

# md-date-picker
angular material customizable date picker directive/component  


[![NPM](https://nodei.co/npm/md-date-picker.png)](https://npmjs.org/package/md-date-picker)

## 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
```shell
bower install md-date-picker --save
//or
npm install md-date-picker --save
```
```javascript
//module
var app = angular.module('app', ['md-date-picker']);
```
```javascript
//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',
};
```
```scss
// sample custom css
.blue-day {
  color: blue;
}
.red-day {
  color: red;
}
```
```html
<!--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](https://raw.githubusercontent.com/appfoundations/md-date-picker/master/preview.png "md-date-picker Screenshot")

### Todos

 - Enhancements
 - Optimizations
 - Unit Tests

License
----

MIT


**Version 0.0.1**

---
_Source: https://npm.io/package/md-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._