AngularJs + jQuery DatePicker 指令 + 字体真棒图标答案

【问题标题】：AngularJs + jQuery DatePicker directive + font awesome iconAngularJs + jQuery DatePicker 指令 + 字体真棒图标
【发布时间】：2014-06-02 19:51:40
【问题描述】：

您好，我在一个 Angular 应用程序中使用 jquery Datepicker，方法是将它包装在一个指令中并且它工作正常

现在我需要让 datepicker 下拉菜单与来自 font-awesome 的日历图标一起使用，这样如果用户点击日历图标，datepicker 的 onSelect 也会被调用。

这是我的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>

和我的指令：

.directive('datePicker', function(){

return{
    restrict: 'A',
    link : function(scope,element){
        element.datepicker(
            {
    onSelect: function(date) {
                scope.selectedDate = date;
                scope.run(date);
                }

        });
    }
}

【问题讨论】：

不确定您对 Angular 的了解程度如何，但通常建议您在掌握它时避免使用 jQuery - joelhooks.com/blog/2013/07/27/… Bootstrap 库的 UI 指令中有一个很棒的日期选择器控件 - angular-ui.github.io/bootstrap
这对我有用。感谢您及时的回复。非常感谢。

标签： angularjs jquery-ui angularjs-directive

【解决方案1】：

我在 jQuery UI 日期选择器中遇到了类似的问题，最后我用自定义指令解决了，请检查下面的代码是否有帮助

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代码是

<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>

【讨论】：