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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent