无法让角度引导日期选择器以正确的日期初始化

Question

我正在尝试在交给我的项目中修改 Angular 形式的 UI 日期选择器。问题是这样的： 有两个日期选择器。当您单击单选按钮时，它会显示日期选择器，此时我使用 $scope.model.from 和 $scope.model.to 加载输入字段。 'from' 设置为今天的日期，'to' 设置为提前六个月。到目前为止，一切看起来都不错，但是如果您单击“到”选择器，日期选择器会弹出，它显示今天的日期是灰色的。如果您提前六个月翻转，您会看到该日期是蓝色的（已选中）。如果您关闭它并再次单击它，它将转到蓝色（和正确）日期。 'from'-picker 以蓝色显示今天的日期，这很好。 这当然是令人困惑的并且不是最优的。我认为日期选择器必须刷新，但我不确定如何。如果我可以让初始化日期开始工作，也许我可以将'from'-picker + 6 个月的日期传递给它。我认为这可能会使其发挥作用。

我正在使用 Angular 1.6.9，angular-bootstrap 0.13.4，angular formly 7.0.1，angular-formly-templates-bootstrap 6.0.0

这是相关代码：

这是 datepickerTpl.html

<p class="input-group">
<input type="text"
       id="{{::id}}"
       name="{{::id}}"
       ng-model="model[options.key]"
       class="form-control"
       ng-click="datepicker.open($event)"
       required
       is-open="datepicker.opened"
       init-date="dateOptions.initDate"
       datepicker-options="dateOptions" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="datepicker.open($event)"><i class="fa fa-calendar"></i></button>
</span>

这是 CustomFormTypes.js

    /*@ngInject*/
function register(formlyConfig, formlyValidationMessages, $filter, gettext, adService) {
    function getDatepickerNgattrs() {
        var attributes = [
            'show-weeks',
            'starting-day',
            'min-mode',
            'max-mode',
            'init-date',
            'format-day',
            'format-month',
            'format-year',
            'format-day-header',
            'format-day-title',
            'format-month-title',
            'year-range',
            'shortcut-propagation',
            'datepicker-popup',
            'show-button-bar',
            'current-text',
            'clear-text',
            'close-text',
            'close-on-date-selection',
            'datepicker-append-to-body'
        ];

        var bindings = [
            'datepicker-mode',
            'min-date',
            'max-date'
        ];

        var statement = [
            'date-disabled',
            'custom-class'
        ];

        var ngModelAttrs = {};

        angular.forEach(attributes, function (attr) {
            ngModelAttrs[_.camelCase(attr)] = {
                attribute: attr
            };
        });

再往下：

{
        name: 'datepicker',
        templateUrl: 'shared/formService/datepickerTpl.html',
        wrapper: ['bootstrapLabel', 'bootstrapHasError'],
        defaultOptions: {
            ngModelAttrs: getDatepickerNgattrs(),
            templateOptions: {
                showWeeks: true,
                closeText: 'close',
                currentText: 'today',
                clearText: 'clear',
                datepickerPopup: 'dd MMMM yyyy'
            }
        },
        controller: /*@ngInject*/ function ($scope) {

            $scope.dateOptions = {
                initDate: new Date('2015-06-22')
            };

            $scope.datepicker = {
                opened: false
            };

            $scope.datepicker.open = function () {
                $scope.datepicker.opened = true;
            };

            }
        }

这是 forms.service.js 的相关部分

(function () {
'use strict';

angular.module('forms')
    .factory('forms', forms);

    function getThisForm($scope, $rootScope) {
        var specific = [{
            className: 'row',
            fieldGroup: [{
                className: 'col-md-12',
                key: 'something-radiobuttons',
                type: 'radio',
                templateOptions: {
                    label: 'something something radiobuttons',
                    options: [{
                        name: 'radioOne',
                        value: 'radioOne'
                    }, {
                        name: 'radioTwo',
                        value: 'radioTwo'
                    }, {
                        name: 'radioThree',
                        value: 'radioThree'
                    }, {
                        name: 'radioFour',
                        value: 'radioFour'
                    }, {
                        name: 'radioFive',
                        value: 'radioFive'
                    }],
                    required: true,
                    onChange: function (v, o, s) 

                        if (s.model.from === undefined) {                           
                            s.model.from = new Date();

                            var tmpDate = new Date();
                            var tmpDate = new Date(tmpDate.setMonth(tmpDate.getMonth() + 6));                                
                            s.model.to = tmpDate;
                        } 

                        if (v !== 'radioThree') {
                            delete s.model['radioTwoInputBox1'];
                            delete s.model['radioTwoInputBox2'];
                        }

                        if (v === 'radioFive') {
                            delete s.model['radioFourInputBox'];
                        }
                        else {
                            delete s.model['OtherInputBox'];
                        }
                    }
                }
            }, {
                className: 'col-md-3',
                type: 'datepicker',
                key: 'from',
                hideExpression: '!model["something-radiobuttons"]',
                templateOptions : {
                    label : 'from',
                    required: true,
                    datepickerOptions: {
                        format: 'yyyy-MM-dd'
                    }
                    ,
                    onChange: function (v, o, s) {
                        var fromDate = new Date(s.model.from);
                        fromDate.setMonth(fromDate.getMonth() + 6); 
                        s.model.to = fromDate;
                    }
                }
            }, {
                className: 'col-md-3',
                type: 'datepicker',
                optionsTypes: ['matchField'],
                key: 'to',
                hideExpression: function (v, o, s) {
                    return (s.model["something-radiobuttons"]=== undefined || s.model["something-radiobuttons"] === "radioOne");
                },
                templateOptions: {
                    label: 'tom',
                    required: true,
                    datepickerOptions: {
                        format: 'yyyy-MM-dd'
                    }
                }

第一次单击，在输入字段中显示正确的日期，但今天的日期显示为灰色。在第二张图像中，我将其翻转到输入字段日期及其蓝色。第二次单击日期选择器时，它立即转到蓝色日期。

Answer 1

尝试更改 $scope.apply 中的模型

$scope.$apply(function() {
    $scope.model.to = fromDate;
});