Question

我希望在datepicker日期未结束时保持select显示我想点击datepiker时关闭它？有一个选择吗？

我使用autoclose: false但在选择日期后关闭:(

var mod = angular.module('matrixarCalendar', []);

mod.directive('datepicker', function ($compile) {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModelCtrl) {
        var updateModel = function (dateText) {
            // call $apply to bring stuff to angular model
            scope.$apply(function () {
                ngModelCtrl.$setViewValue(dateText);
            });

        };

        scope.updateDatePicker = function () {
            var template;
            template = $.datepicker.dpDiv.append($('#custom-footer').contents().text());
            $compile(template)(scope);
        };
        var options = {
            dateFormat: 'dd/mm/yy',
            numberOfMonths: 2,
            autoSize: true,
            autoclose: true,
            minDate: new Date(),
            onSelect: function (dateText) {
                updateModel(dateText);
            }
        };
        elem.datepicker(options);
    }
}

我的HTML：

...
<script type="text/ng-template" id="custom-footer" >
<div>
    <table ng-controller="SearchController" class="selection">
        <thead>
        <tr>
            <th>Horaires:</th>
            <th class="{{time == '0'? 'selected' : ''}}" ng-click="changeTime('0')"><p><span>Journée</span><span>(00h-24h)</span></th>
            <th class="{{time == '1'? 'selected' : ''}}" ng-click="changeTime('1')"><p><span>Matinée</span><span>(00h-12h)</span></th>
            <th class="{{time == '2'? 'selected' : ''}}" ng-click="changeTime('2')"><p><span>Après-midi</span><span>(12h-17h)</span></th>
            <th class="{{time == '3'? 'selected' : ''}}" ng-click="changeTime('3')"><p><span>Soirée</span><span>(17h-24h)</span></th>
        </tr>
        </thead>
    </table>
</div>
</script>
<div class="ui-datepicker-calendar columns small-3">
<input type="text" ng-model="goDate" ng-click="updateDatePicker()"
       placeholder="Date d'aller" datepicker/>
</div>
...

我的Ctrl：

angular.module('matrixarSearch', [
'mm.foundation',
'matrixarAutocomplete',
'matrixarCalendar'
]).controller('SearchController', function ($scope, $translate) {
...
    $scope.changeTime = function(val){
        $scope.time = val;
        console.log($scope);
    };
...

Answer 1

在我的指示中：

...
var options = {
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 2,
    autoSize: false,
    minDate: new Date(),
    onSelect: function (dateText) {
        $(this).data('datepicker').inline = true;
        updateModel(dateText);
    },
    onClose: function() {
        $(this).data('datepicker').inline = false;
    }
};
...

当我点击日期选择器时关闭datepicker

1 个答案: