AngularJs + jQuery DatePicker directive + font awesome icon

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);
                }

        });
    }
}

Answer 1

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>