Pure AngularJS DateTime Picker – iamrohit.in

angular-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

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

See live demo and download source code.

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

Your email address will not be published. Required fields are marked *

Top