Question

我正在尝试在我交给我的项目中修改角度形式的UI datepicker。问题是：有两个日期选择器。单击radiobutton时，它会显示datepickers，此时我使用$ scope.model.from＆amp;加载输入字段。 $ scope.model.to。 'from'设置为今天的日期，'to'设置为提前六个月。到目前为止，一切看起来都不错，但是如果你点击'to'-picker，弹出的是datepicker，它显示今天的日期变灰了。如果您提前六个月，您可以看到日期为蓝色（已选中）。如果您关闭它并再次单击它会转到蓝色（和正确）日期。 '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;
});

无法使用正确的日期

1 个答案: