modalmddatepicker v1.0.13
Angular Material DatePicker
Just another native Angular Material-Design DatePicker Component. see demo
Installation
You can choose your installation method:
- bower:
bower install modal-md-datePicker --save
- npm:
npm install modalmddatepicker --save
- Download from github: modal-md-datepicker
Requirements
- angular-material 1.0.7+
Usage
Include modal-md-datepicker.min.js in your application.
<script src="bower_components/modalmddatePicker/modal-md-datepicker.min.js"></script>
Toolbar date language is defined by angular-locale
library.
Angular separates number and datetime format rule sets into different files, each file for a particular locale. You can find a list of currently supported locales here.
<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_es-co.js"></script>
Add both mdThemeColors
and ModalDatePicker
modules as a dependency to your app module.
var app_ = angular.module('app',[
'ngMaterial', // angular material required
...
'mdThemeColors',
'ModalDatePicker'
]);
Default datepicker
<modal-md-datepicker ng-model="selectedDate"></modal-md-datepicker>
Format date
Attribute date-format
: String
with plain javascript date format. Format input text result date.
<modal-md-datepicker ng-model="selectedDate" date-format="dd MMMM yyyy"></modal-md-datepicker>
Min Date
Attribute min-date
: Date
javascript date object with min date.
<modal-md-datepicker ng-model="selectedDate" min-date="{{min_date}}"></modal-md-datepicker>
$scope.min_date = new Date();
Max Date
Attribute max-date
: Date
javascript date object with max date.
<modal-md-datepicker ng-model="selectedDate" max-date="{{max_date}}"></modal-md-datepicker>
$scope.max_date = new Date();
Locked input
Attribute locked
: bool
Locks input field to prevent direct write.
<modal-md-datepicker ng-model="selectedDate" locked="true"></modal-md-datepicker>
Options
Attribute options
: json
Object with language attributes.
Allow to define default language or Strings with month and day names.
lang
: optional
Allow to define default language for month and day names in calendar.
<modal-md-datepicker ng-model="selectedDate" options="dp_options"></modal-md-datepicker>
$scope.dp_options = {
lang : 'en' // en, es, default:es
};
Month and day names : optional
Allow to define default language for month and day names in calendar.
<modal-md-datepicker ng-model="selectedDate" options="dp_options"></modal-md-datepicker>
$scope.dp_options = {
sort_days : ['D', 'L', 'M', 'M', 'G', 'V', 'S'],
months : ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
short_months : ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
}
Toolbar title date language is defined by angular-locale
library. More info
title_date_format
: optional
Allow to format component title date, with plain javascript date format.
<modal-md-datepicker ng-model="selectedDate" options="format_title_options"></modal-md-datepicker>
$scope.format_title_options = {
title_date_format : 'EEEE, MMMM d'
};
Example
Live Example: Live simple example in jsfiddle.net.
test/index.html: Test page included in the project with all options implemented.
License
Released under the terms of the MIT License.