Simple Date Picker For jQuery and AngularJS - Datepicker

Simple Date Picker For jQuery and AngularJS - Datepicker
File Size: 7.63 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple lightweight jQuery plugin that appends a nice clean date picker component to your input box using moment.js. Also provided as a datepicker module for AngularJS.

How to use it:

1. Load the necessary jQuery library or Angular.js in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- or -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>

2. Load the moment.js and the Datepicker's files in the document.

<link href="src/datepicker.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="src/datepicker.js"></script>

3. Use the datepicker component as a jQuery plugin.

$('SELECTOR').datepicker({//OPTIONS})

4. Use the datepicker component as an Angularjs module.

<input id="angular-demo" type="text" 
       data-datepicker="{theme: 'flat'}" 
       data-ng-model="value1"
>
angular.module('SELECTOR', ['datepicker'])
  .controller('datepicker.controller', ['$scope', function($scope) {
    $scope.value1 = "14.04.2016";
    $scope.today = moment().toDate();
}]);

4. Default options.

initial_value: null,
dateformat: 'DD.MM.YYYY',
placeholder: $element.attr('placeholder') || '',
theme: 'basic', // basic or flat
readonly: true,
vertical_offset: 3,
is_invalid_date: null

This awesome jQuery plugin is developed by gardiner. For more Advanced Usages, please check the demo page or visit the official website.