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

FauzanKhan / angular-datepicker