Timepicker Angularjs Example – Timepicker Example angular-time-picker

Rate this post

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

READ :  Get Url Parameter with Query String using VueJs

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

[php]
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
[/php]

AngularJS Timepicker Single Input Example

index.html

[php]

AngularJS infinityknow

var1={{var1}}



[/php]

app.js

[php]

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();
});
}
};
});
[/php]

READ :  C# Boxing & Unboxing Tutorial with Examples

Example

Leave a Reply

Your email address will not be published.