i want create an angular directive for persian datepicker, javascript lib that i want to use is http://jspersiandatepicker.codeplex.com/, and my code is :
<input type="text" persiandatepicker ng-model="mydate" />{{mydate}}
directive('persiandatepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function () {
element.bind("click", function () {
PersianDatePicker.Show(this, ngModel.$viewValue || '');
});
};
}
};
});
this code show datepicker when click on input and when select date show in input, but model not bind and not change how can i do binding in this sample??
this link in plunker is my code : http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview
You need to let angular know that the value has changed. It looks like the datepicker calls _textBox.onchange(); when it is finished updating the textbox so you can hook into that event. You will need to wrap your code in
element.bind("onchange", function () {
scope.$apply(function() {
//Code to update model goes here.
//Basically you will need to copy the textbox's contents to the model,
// you may wish to convert to a date object as well
}
}
The angularui datepicker source code is only 120 lines long and could be a great resource if you are looking for an example on creating a datepicker directive.
Currently there is a good one Available. it's a Persian angularjs calendar:
Amin Rahimi's angularjs Datepicker .
Also you can use this version of angular-ui bootstrap that has persian calendar: persian angular bootstrap
Related
In short, I need to find a way to update ng-model when using bootstrap-datepicker. Here is a plunker I made to demonstrate what is going on http://plnkr.co/edit/nNTEM25I2xX2zRKOWbD1?p=preview. I've tried searching around and am fairly positive that I need to use a directive to pass a value to the model. Typing something in the text box will update the selected date model, but just using the datepicker does nothing. The below directive seemed like it should work but unfortunately it doesn't seem to have much of an effect.
app.directive('datepicker', function() {
return {
restrict : 'A',
require : 'ngModel',
link : function(scope, element, attrs, ngModelCtrl) {
$(function() {
element.datepicker({
dateFormat : 'dd/mm/yy',
onSelect : function(date) {
ngModelCtrl.$setViewValue(date);
element.datepicker("setDate", date);
scope.$apply();
}
});
});
}
}
});
An easy solution would be to just use another datepicker, but unfortunately due to restrictions on how many external libraries I can use this is the datepicker I have to use. Any insight would be greatly appreciated!!!
I strongly recommend using UI-Bootstrap or something similar.
But for those that need to use Bootstraps date-picker for whatever reason here is a starting place using your directive, with a few changes:
app.directive('datepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
compile: function() {
return {
pre: function(scope, element, attrs, ngModelCtrl) {
// Initialize the date-picker
$(element).datepicker({
format: 'dd/mm/yyyy'
}).on('changeDate', function(ev) {
// Binds the changes back to the controller
// I also found that event.format() returns the string
// I wasn't aware of that. Sure beats using the date object and formatting yourself.
ngModelCtrl.$setViewValue(ev.format('dd/mm/yyyy'));
// I HATE using $apply, but I couldn't get it to work without
scope.$apply();
});
}
}
}
}
});
HTML:
<input type="text" datepicker="" ng-model="date" />
Very simple and straightforward and allows you to reuse, here is a working plunker
I've been trying to implement Selectize with AngularJS (1.2.4). I'm using this directive to interface with the plugin and everything is working smoothly until now. When using the ngModel from a normal select box It works fine, and returns the expected object but when I try to use it with the multiple attribute, it won't set the model.
I've inspected the DOM and appears the script removes unselected options from the hidden select and that might be messing with the angular binding.
I've created a Plunkr to demonstrate the behaviour.
http://plnkr.co/It6C2EPFHTMWOifoYEYA
Thanks
As mentioned in the comments above, your directive must listen to changes in the selectize plugin and then inform angular of what happened via ng-model.
First, your directive needs to ask for an optional reference to the ngModel controller with the following:
require: '?ngModel'.
It is injected into your link function as an argument in the 4th position:
function(scope,element,attrs,ngModel){}
Then, you must listen for changes in selectize with
$(element).selectize().on('change',callback)
and inform ngModel with ngModel.$setViewValue(value)
Here is a modified version of your directive. It should get you started.
angular.module('angular-selectize').directive('selectize', function($timeout) {
return {
// Restrict it to be an attribute in this case
restrict: 'A',
// optionally hook-in to ngModel's API
require: '?ngModel',
// responsible for registering DOM listeners as well as updating the DOM
link: function(scope, element, attrs, ngModel) {
var $element;
$timeout(function() {
$element = $(element).selectize(scope.$eval(attrs.selectize));
if(!ngModel){ return; }//below this we interact with ngModel's controller
//update ngModel when selectize changes
$(element).selectize().on('change',function(){
scope.$apply(function(){
var newValue = $(element).selectize().val();
console.log('change:',newValue);
ngModel.$setViewValue(newValue);
});
});
});
}
};
});
Also:
plunker
angular docs for ngModelController
I am using angular-strap datepicker from http://mgcrea.github.io/angular-strap/##datepickers for my angularjs SPA project. when editing an existing record using ngModel two way binding, Angular doesn't detect the date field change and even if I force the form to save by updating another non date field, the new date is not updated in backend. Here is the related part in my html file:
<input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}"
data-date-format="MM-dd-yyyy"
data-ng-model="vm.formData.dateDecision"
data-ng-required="vm.decisionDateRequired"
bs-datepicker />
I do not do anything special in my js file. I am using breezejs for my data handling and it is working fine for other fields.
what am I doing wrong? Any help is appreciated.
I've had this same problem and I solved with a custom directive that updates the model when the bs-datepicker dispatches a blur event:
angular.module('moduleName').directive('updateModelOnBlur',
['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs) {
elm.bind("blur", function (event) {
scope.$apply(function () {
var model = $parse(attrs.ngModel);
model.assign( scope, elm.context.value );
});
});
}
};
}]
);
I know this is just a hack, and not a final solution for the problem. But, if you are stuck and want to keep going, sometimes a hack might be useful.
You can also include $filter service in the directive if you want to manipulate date format before updating model. ;)
I'm a little lost here. I defined an angular directive that creates a datepicker (the bootstrap datepicker by eternicode(https://github.com/eternicode/bootstrap-datepicker/)):
The datepicker appears to work visually. It pops up, and puts a value in my textbox. But the angular model is not updated unless I edit the textbox by hand.
My directive:
myApp.directive('ccDatePicker', function ($compile) {
return {
restrict: 'EA',
template: '<input type="text" ng-model="ngModel" />',
require: '^ngModel',
scope: {
ngModel: '='
},
replace: false ,
link: function (scope, element, attrs) {
element.children(0)
.on('change', function () { scope.$digest(); })
.datepicker({ format: 'yyyy/mm/dd', autoclose: true });
}
};
});
My HTML:
<label>Due date: <cc-date-picker ng-model="todoObject.dueBy" /></label>
<div>
dueBy: {{todoObject.dueBy}} (updates when editing textbox by hand, but not when using date picker)
</div>
I used scope.$digest to refresh the model, and I also tried scope.$apply. No luck.
How do I get my angular model to update when the user chooses a date in the date picker?
I had a similar problem when trying to make a datepicker directive based on a jQuery plugin, because the datepikcer's onSelect() event happens outside the angular world and no notifications are raised, you need to call a $scope.$apply() force a digest to let angular know that it should update the model value:
onSelect: function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
Also in the snippet you posted, I don't see where you're setting the models value, hence this line:
ngModelCtrl.$setViewValue(date);
EDIT
I made a plunk demonstrating what needs to be done. On an unrelated note, why don't you use the angular-ui datepicker?
if you set the dueBy date first (eg.
$scope.todoObject={dueBy:"04/27/2015"};
how to make the dropdown show the initial value when it's first displayed?
http://plnkr.co/edit/xOzfQOOMe1GFoB1tfQiF?p=preview
I really love how the new ng-click directive in Angular now automatically includes functionality for touch events. However, I am wondering if it is possible to access that touch-event service from my custom directive? I have lots of directives that require that I bind a click event to the given element, but I'm simply doing that using the typical jquery syntax (ex: element.on('click', function(){ ... })). Is there a way that I can bind an ng-click event to an element within a directive? Without having to manually put a ng-click tag on my element in the HTML of my view...?
I want to be able to harness the power of both click and touch events. I could obviously import a library (such as HammerJS or QuoJS) but I would prefer not to have to do that, especially since Angular is already doing it.
I can access the $swipe service and bind different elements to that, but is there a similar service for ngTouch?
For reference, this is an example of when I would want to do this:
mod.directive('datepicker', ['$timeout', function($timeout){
return {
link: function(scope, elem, attrs){
var picker = new DatePicker();
elem.on('click', function(e){
picker.show();
});
// I would rather do something like:
// elem.on('ngTouch', function(){ ... });
//
// or even:
// $ngTouch.bind(elem, {'click': ..., 'touch': ...});
}
}
}]);
UPDATE: As noted by below, the source code for the ng-click directive is here. Can anyone see a way to harness that code and turn it into a "bindable" service?
I don't think that's quite the right approach. I'd approach this by using a template within your directive and then using ngTouch within that.
mod.directive('datepicker', ['$timeout', function ($timeout) {
return {
template: '<div ng-touch="doSomethingUseful()"></div>',
link: function (scope, elem, attrs) {
var picker = new DatePicker();
scope.doSomethingUseful = function () {
// Your code.
}
}
}
}]);
UPDATE
Full example with additional attributes on the directive element:
http://codepen.io/ed_conolly/pen/qJDcr