Pure AngularJS DateTime Picker

In this post I am going to share AngularJS DateTime Picker Without JQuery and Bootstrap. This is quite simple to integrate without any third party library just need angular core library and all done. The plugin support date and time both so you don’t need to add datepicker and timepicker individually. This single datetime picker is enough to add datetime picker feature on your angular app. Also there is lot’s of data attribute which you can use to customize the datetime picker.
angular-datetime-picker

Libraries

Include angularjs-datetime-picker.js and angularjs-datetime-picker.css

<link rel="stylesheet" href="angularjs-datetime-picker.css" />
 <script src="angularjs-datetime-picker.js"></script>

add it as a dependency

var myApp = angular.module('myApp', ['angularjs-datetime-picker']);

Template

<input datetime-picker ng-model="model" />

Here are the list of attribute you can use to customize the datetime plugins.

  • date-format: optional, date format e.g. ‘yyyy-MM-dd’
  • year: optional, year selected, e.g. 2015
  • month: optional, month selected, e.g. 5
  • day: optiona, day selected, e.g. 31
  • hour: optional, hour selected, 23
  • minute: optional, minute selected, 59
  • date-only: optional, if set, timepicker will be hidden
  • future-only: optional, if set, forces validation errors on dates earlier than now


Examples

Following are the list of different different datepicker & timepicker examples

<input ng-model="date1" datetime-picker date-only />
 
<input ng-model="date1" datetime-picker date-only future-only />
 
<input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only />
 
<input ng-model="date3" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" />
 
<input ng-model="date4" datetime-picker hour="23" minute='59'/>
 
<input ng-model="date5" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" year="2014" month="12" day="31" />

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by kineticsocial, Visit their official github repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.