ngDatepick
An elegant, easily customizable datepicker in Angular built on top of Datepicker by fulup-bzh
Description
- An angular directive for datepicker.
- Easily customizable, elegant design.
- Works well with/without Foundation & Bootstrap.
Dependecies
- Angular.js
- Google material Icons
Installation
-
Use the following cpmmand to install the bower pakage for the datpicker:
bower install fzn-angular-datepicker -
Or Copy datepicker.js and datepicker.scss from the repository and use it the way you like.
Usage
- Make sure you include the '''datepicker''' module in you angular app:
angular.module('myApp', ['date-picker']); - once you've added the module in your app. Use the code below to get the datepicker up and running:
<date-picker id="my-picker-name" // only use as an argument to callback class="my-custom-class" // default class is bzm-date-picker placeholder="Track Date Selection" // place holder for date readonly input zone // Angular Scope Variables callback="myCallBack" // $scope.myCallBack(selectedDate) is called when ever a new date is selected ng-model="viewDate" // $scope.viewDate angular scope for selected date not-after="myEndDate" // $scope.myEndDate = JS Date OBJECT not-before="myStartDate" // $scope.myStartDate = idem // Angular Directive Attributes format="dd-MM-yy" // angular date filter https://docs.angularjs.org/api/ng/filter/date language="en" // English, French, German, ... weekstart="1" // Week start [1==Monday] today='true|text' // If true display 'today' in chosen language, if 'text' display text in todaybouton dayoff=[6,7] // Disable Saturday/Sunday for selection weeknum="true" // Display week number month-only="true" // Allow user to pick months & years only autohide= /></date-picker> ###Customization You can easily customize the look and feel of the datepicker by changing the following variables in the datepicker.scss file as per your requirement:
$primary-font: arial; // the font you want to use $primary-color: #008CCD; // the highlighting colot $text-color: #434A54; // color of the text in datepicker $border-color: #EAEAEA; //Datepicker's border color $hover-color: #F8F8F8; $white: #FFF; $black: #333;###Demo visit http://fauzankhan.github.io/angular-datepicker/ to see the datepicker in action
