AngularJs + jQuery DatePicker directive + font awesome icon
-
20-12-2019 - |
Question
Hi I am using jquery Datepicker in an angular app by wrapping it in a directive and its working fine
Now I need to make the datepicker dropdown work with the calendar icon, which is from font-awesome, so that if a user clicks on the calendar icon, the datepicker's onSelect gets called as well.
here is my html
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-2 control-label">WatchList</label>
<div class="col-md-5 input-group">
<input type="text" class="form-control" date-picker >
<span class="input-group-addon" ><i class="fa fa-calendar"></i> </span>
</div>
</div>
</fieldset>
</form>
and my directive:
.directive('datePicker', function(){
return{
restrict: 'A',
link : function(scope,element){
element.datepicker(
{
onSelect: function(date) {
scope.selectedDate = date;
scope.run(date);
}
});
}
}
Solution
I have faced similar issue in jQuery UI date-picker, Finally I have resolved with custom directive, please check below code it my be helpful
app.directive('datePicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
orientation: "top",
autoclose: true,
changeMonth: true,
changeYear: true,
startDate: '-100y',
//endDate: '-1d',
}).on('change', function () {
});
var component = element.siblings('[data-attr="datepicker"]');
if (component.length) {
component.on('click', function () {
element.trigger('focus');
});
}
}
};
});
HTML code is
<div class="input-group">
<input type="text" ng-model="date" class="form-control" placeholder="Date" date-picker="">
<span class="input-group-addon" data-toggle="datepicker">
<i class="fa fa-calendar"></i>
</span>
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow