Simple Date Picker For jQuery and AngularJS - Datepicker
File Size: | 7.63 KB |
---|---|
Views Total: | 20428 |
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.