Question

我正在尝试将所选日期的值保存到db。但ng-modal并未反映datepicker中的选定日期。此外，没有一项验证工作正在进行中。

＆＃13;

var app = angular.module('app', []);
    app.controller('myController', function($scope){
    	$scope.valid = false;
    	var today=new Date();
    	$scope.today = today.toISOString();
    	$scope.submit = function(){
    		$scope.valid = true;
    	}
    	$scope.close = function(){
    		$scope.valid = false;
    	}
    	addFlood =function(){
    	  alert(JSON.stringify(addFlood));
    	}
    	
    });

＆＃13;

//here is the html file for the datepicker
<!-- here is my html file -->
    <!DOCTYPE html>
    <html lang="en" ng-app="app">

    <head>
      <meta charset="utf-8">
      <title>AngularJS Form Validation</title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
      

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
      <style type="text/css">
        .errortext {
          color: red;
        }
      </style>
    </head>

    <body ng-controller="myController">
     <div class="container-fluid">
        <div class="row col-md-6 col-sm-6 col-xs-12">
          <div class=" form-body">
            <form role="form" name="myForm" novalidate>


     <div class="form-group">
                <label class="control-label "> Gate Open Date - Today:-> {{today | date:'yyyy-MM-dd'}} </label>
                <div class="input-group date" date-picker>
                  <!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="date"/>-->
                  <input type="text" id="date" name="gateOpenDate" class="form-control" placeholder="YYYY-MM-DD" [(ngModel)]="$parent.addFlood.gateOpenDate" min="{{today | date:'yyyy-MM-dd'}}" required autofocus date-picker-input/>
                  <div class="errortext" ng-show="myForm.gateOpenDate.$dirty && myForm.gateOpenDate.$invalid">
                    <span ng-show="myForm.gateOpenDate.$error.required">Gate Open Date is required</span>
                    <span ng-show="myForm.gateOpenDate.$error.date">Date Format Must Be MM-DD-YYYY</span>
                    <span ng-show="myForm.gateOpenDate.$error.min">Gate open Date should not be less than current date</span>
                  </div>
                  <div class="input-group-addon">

                    <i class="fa fa-calendar"> </i>
                  </div>
                </div>
              </div>
    </form>
    </div>
                </div>
              </div>
              ngModel :{{addFlood.gateOpenDate}}
              
              
               <script src="angular.js"></script>
      <script>
        $(document).ready(function() {
          var date_input = $('input[name="gateOpenDate"]'); //our date input has the name "date"
          var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
          date_input.datepicker({
            format: 'yyyy-mm-dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
            startDate: new Date(),
            
           	
          })
        })
        function read() {
    				var value = element.find('input').val();
    				ngModel.$setViewValue(value);
    			}
      </script>


    </body>

    </html>

＆＃13;

Answer 1

ng-model $-日期对象。必须是Javascript Date对象。您可以使用uibDateParser服务来辅助字符串到对象的转换。

我无法使用ng-model绑定日期选择器

1 个答案: