如何设置ng-model和一些验证引导datepicker

时间:2018-02-02 11:58:30

标签: javascript jquery angular datepicker bootstrap-datepicker

当我刷新页面时,我的ng-model无法绑定到文本字段,但是当我在标签上调用它时,模型可以显示ng-model的值?

这是我的js文件:



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

$scope.today = function () {
            $scope.dt = new Date();
        };
        $scope.today();

        $scope.clear = function () {
            $scope.dt = null;
        };

        $scope.inlineOptions = {
            customClass: getDayClass,
            minDate: new Date(),
            showWeeks: true
        };

        $scope.dateOptions = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            //maxDate: new Date(2040, 5, 22),
            //minDate: new Date(),
            //startingDay: 1
        };

        //max date hari ini
        $scope.dateOptions1 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            maxDate: new Date(),
            //minDate: new Date(),
            startingDay: 1,
        };

        //min date hari ini
        $scope.dateOptions2 = {
            //dateDisabled: disabled,
            formatYear: 'yyyy',
            //maxDate: new Date(),
            minDate: new Date(),
            //startingDay: 1,
        };

        $scope.toggleMin = function () {
            $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
            $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
        };

        $scope.toggleMin();

        $scope.open1 = function () {
            $scope.popup1.opened = true;
        };

        $scope.open2 = function () {
            $scope.popup2.opened = true;
        };


        $scope.setDate = function (year, month, day) {
            $scope.dt = new Date(year, month, day);
        };

        //$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
        //$scope.format = $scope.formats[0];
        //$scope.altInputFormats = ['M!/d!/yyyy'];

        $scope.popup1 = {
            opened: false,            
        };
        
        $scope.popup2 = {
            opened: false,            
        };


        var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        var afterTomorrow = new Date();
        afterTomorrow.setDate(tomorrow.getDate() + 1);
        $scope.events = [
          {
              date: tomorrow,
              status: 'full'
          },
          {
              date: afterTomorrow,
              status: 'partially'
          }
        ];

        function getDayClass(data) {
            var date = data.date,
              mode = data.mode;
            if (mode === 'day') {
                var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

                for (var i = 0; i < $scope.events.length; i++) {
                    var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);

                    if (dayToCheck === currentDay) {
                        return $scope.events[i].status;
                    }
                }
            }

            return '';
        }
&#13;
&#13;
&#13;

这是我的HTML:

&#13;
&#13;
<label>{{eApp.Steps.PersonalDetails.Sections.BeneficialOwner.SubSections.BeneficialOwnerBasic.Dob}}</label>
                                    <input ng-click="open1()" type="text" class="form-control date" 
                                           uib-datepicker-popup="dd-MM-yyyy" 
                                           is-open="popup1.opened"
                                           ng-required="true" 
                                           close-text="Close" 
                                           
                                           show-button-bar="false" 
                                           datepicker-options="dateOptions1" 
                                           ng-model="eApp.Steps.PersonalDetails.Sections.BeneficialOwner.SubSections.BeneficialOwnerBasic.Dob" 
                                           validate="BeneficialOwnerDobRules"
                                           ng-change="updateBeneficialOwnerAge()" 
                                           ng-disabled="eApp.Status=='S'"                                           
                                           />
&#13;
&#13;
&#13;

关键是当我保存并刷新页面时,datepicker的值无法在我的文本字段中显示。但为什么价值仍然出现在我的标签上?

0 个答案:

没有答案