DateTimePicker的日期选择器

时间:2014-12-09 14:46:35

标签: javascript angularjs angularjs-directive

我的html中有选择日期的指令

JSFIDDLE

angular
    .module('App',['ui.date'])
    .directive('customDatepicker',function($compile){
        return {
            replace:true,
            templateUrl:'custom-datepicker.html',
            scope: {
                ngModel: '=',
                dateOptions: '='
            },
            link: function($scope, $element, $attrs, $controller){
                var $button = $element.find('button');
                var $input = $element.find('input');
                $button.on('click',function(){
                    if($input.is(':focus')){
                        $input.trigger('blur');
                    } else {
                        $input.trigger('focus');
                    }
                });
            }    
        };
    })
    .controller('myController',function($scope){
        $scope.birthDate = '2013-07-23';
        $scope.dateOptions = {
            minDate: -20,
            maxDate: "+1M +10D"
        };
    });

现在我想插入这个DatePicker插入这样的插槽,当我选择一个插槽时我会返回例如$scope.time='00h-12'

我无法理解如何做到这一点。

enter image description here

1 个答案:

答案 0 :(得分:1)

customDatepicker指令中,您可以直接更新datepicker,例如$.datepicker.dpDiv.append($("#custom-footer").contents().text());;请参阅下面引用的jsfiddle的第21行。

另外,按照惯例,我将自定义页脚文本添加为​​嵌入在脚本标记中的模板;见第7-10行。

更新了解决方案:http://jsfiddle.net/haroldcampbell/FVfSL/808/