Timepicker Angularjs Example – Timepicker Example angular-time-picker
A very simple and lightweight date time picker directive for using Angular.js.
Features
With no external any dependency, simple angular-time-picker is lighter pickDate and faster.
It can be used for new Available picking a single input time or a range timepicker of time.
Many different types configurable options like as A:
-Setting the NEW BASIC initial display custom time as per the new requirements
-Two minimalistic way of the different themes view light themes and dark
-Precisely simple settings configure/update the range time-picker of time as per min the needs
-Robust all the validation simple exclusively for time range – picker
-Provide supprted custom callbacks data-date-icon pickDate for apply / cancel time-picker operations
A basic and easy to readble lightweight angularjs time picker widget directive.There are a number of List of options that can be setting configured with inline init attributes. and All are optional.
-data-dropdown
-data-time-settings
-data-theme
-data-no-range
-data-format
-data-no-validation
-data-apply-callback
-data-clear-callback
In this Example You will show you,Timepicker Angularjs Example – Timepicker Example angular-time-picker
Include libs
style.css bootstrap-combined.min.css bootstrap-datetimepicker.min.css jquery.min.js bootstrap.min.js bootstrap-datetimepicker.min.js angular.min.js app.js
AngularJS Timepicker Single Input Example
index.html
<title>AngularJS infinityknow</title>
<div class="container container-fluid">
var1={{var1}}
<form class="form-horizontal" name="form">
<div class="well">
<div id="date" class="input-append">
<span class="add-on">
<i></i>
</span>
</div>
</div>
</form>
</div>
app.js
var app = angular.module('infinityknow', []);
app.controller('liveCtrl', function($scope) {
$scope.var1 = '12-07-2013';
});
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
language: 'en',
pickDate: false,
}).on('changeDate', function(e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});