Comments (9)
You can use something like this
app.directive("clockPicker", function(){
return {
restrict: "A",
link: function(scope,element,attrs) {
// Initialize the clockpicker with options.
element.clockpicker({
placement: 'top',
donetext: 'Done'
});
}
}
});
The to use it:
from clockpicker.
Thanks, done.
from clockpicker.
Hi,
Does it work for you ?
Thx
from clockpicker.
Can you send me your directive please ?
Because my model is not updated.
View is ok ;)
from clockpicker.
Best what I have within 5 mins.
(function () {
function directive (parse) {
function link (scope, elm, attrs, ngModel) {
var inputElm = $('input', elm);
var modelGetter = parse(attrs['ngModel']);
var modelSetter = modelGetter.assign;
function afterUpdate () {
var value = modelGetter(scope);
if (value) {
value = moment(value);
}
var inputVal = moment(inputElm.val(), 'HH:mm');
if (inputVal.isValid()) {
if (!value) {
modelSetter(scope, inputVal.toDate());
} else {
value.hour(inputVal.hour());
value.minute(inputVal.minute());
modelSetter(scope, value.toDate());
scope.$digest();
}
}
}
elm
.clockpicker({
donetext: 'Done',
autoclose: true,
afterDone: afterUpdate
});
inputElm.blur(afterUpdate);
ngModel.$formatters.push(function (value) {
if (value) {
inputElm.val(moment(value).format('HH:mm'));
}
return value;
});
}
return {
restrict: 'C',
require: 'ngModel',
link: link
};
}
angular
.module('clockpicker')
.directive('clockpicker', ['$parse', directive]);
})();
<div class="input-group clockpicker" ng-model="someScopeVariable">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
from clockpicker.
Thanks a lot, @mujichOk !
The only thing I had to change to make model updates working is to add $timeout
to afterUpdate
function. So my directive looks like this:
angular.module('myApp')
.directive('clockpicker', ['$timeout', '$parse', function ($timeout, $parse) {
return {
restrict: 'C',
require: 'ngModel',
link: function link(scope, elm, attrs, ngModel) {
var inputElm = $('input', elm);
var modelGetter = $parse(attrs['ngModel']);
var modelSetter = modelGetter.assign;
function afterUpdate() {
return $timeout(function () {
var value = modelGetter(scope);
if (value) {
value = moment(value);
}
var inputVal = moment(inputElm.val(), 'HH:mm');
if (inputVal.isValid()) {
if (!value) {
modelSetter(scope, inputVal.toDate());
} else {
value.hour(inputVal.hour());
value.minute(inputVal.minute());
modelSetter(scope, value.toDate());
scope.$digest();
}
}
})
}
elm.clockpicker({
donetext: 'Done',
autoclose: true,
afterDone: afterUpdate
});
inputElm.blur(afterUpdate);
ngModel.$formatters.push(function (value) {
if (value) {
inputElm.val(moment(value).format('HH:mm'));
}
return value;
});
}
}
}]);
from clockpicker.
First thanks for the above answers. However, I am unable to update my model. Please advise @mujichOk @evdoks . The old value still persists.
from clockpicker.
@Prashanth-iNautix : Try to change scope.$digest(); to scope.$apply(); In my case this did the trick!
from clockpicker.
https://github.com/linagora/angular-clockpicker, it's available on bower under the name angular-clockpicker
from clockpicker.
Related Issues (20)
- How do I set start hour, start minute, end hour, end hour? HOT 1
- Bootstrap 4 support HOT 2
- Loading Clockpicker in jQuery Modal HOT 3
- [Nooby mistake] auto-close doesn't work
- Can a ClockPicker work when it's dynamically loaded? HOT 3
- Active project and material design look HOT 2
- Use of this library with Webpack/ES6 import
- [FIXED] e.originalEvent.touches is empty in chrome HOT 1
- Need a space between HH:SS AM HOT 2
- How to use Jquery clockpicker with React? HOT 1
- Clockpicker still showing in disabled
- the feedback events have no parameters HOT 3
- How to change the size of clockpicker? HOT 4
- Plugin scrolling instead of changing time
- Is it possible to hide the leading zero in single digit times in AM/PM?
- restrict minutes to one choice
- How to get currently selected hour in afterHourSelect event?
- ReferenceError: primordials is not defined HOT 1
- Is this still maintained? HOT 1
- I couldn't localize the AM and PM to some other UTF-8 language. Any help? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from clockpicker.