如何在Angular Js的输入框中设置日期的默认值

时间:2015-07-28 10:04:00

标签: javascript jquery angularjs

我是角度Js的新手,无法在下拉列表中设置默认值并尝试输入框中的当前日期值,但经过多次R& D我没有得到一些结果。任何人都可以检查这个plunker代码来整理程序。

    <!DOCTYPE html>
    <html>

      <head>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link rel="stylesheet" href="style.css" />
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
        <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="bootstrap-datetimepicker.min.js">

        //http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>

        <script type="text/javascript" src="bootstrap-datetimepicker.pt-BR.js">
        //http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>

      </head>
      <body><div ng-app="plunker" ng-controller="MainCtrl" ng-init="selected_id1=selected_id2 = var1 = var2 '';">

           <div ng-repeat='selecting in selects'  ng-init="selected_id1=selected_id2='';var1=var2='';test=''"> Start Date

          <select 
          ng-model="selecting.selected_id1" 
          ng-options="o.id as o.name for o in options" 
          ng-change="selected_name1=(options|filter:{id:selected_id1})[0].name">
        </select>
        <select 
          ng-model="selecting.selected_id2" 
          ng-options="o.id as o.name for o in options" 
          ng-change="selected_name2=(options|filter:{id:selected_id2})[0].name">
        </select>


             <div class="container container-fluid" ng-controller="MainCtrl">
          <form class="form-horizontal" novalidate name="form" ng-submit="submit()">
          <div class="well">
            <div id="date" class="input-append" datetimez ng-model="selecting.var1">
              <input data-format="MM/dd/yyyy " type="text" id="input1" name="input1" min="2013-01-01" max="2013-12-31" required /></input>
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
              </span>
            </div>

            <div id="date" class="input-append" datetimez ng-model="selecting.var2">
              <input data-format="MM/dd/yyyy " type="text" id="input1" name="input1" min="2013-01-01" max="2013-12-31" required /></input>
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
              </span>
            </div>
          </div>
      </form>
    <!--  Date Result:  <input type="text" value="{{((selecting.var2 - selecting.var1)/3600/1000/24) | number:0;}}" ng-model="test"><p>{{ test}}</p>
    -->  </div>


      <button type='button' ng-click='remove(selecting)'>Remove</button>
      </div>
      <div>
        <button type='button' ng-click='add()'>Add</button>
        <p>Time Difference:{{test() | number:0}}</p>
         <p>Date Difference:{{dateResult() | number:0}}</p>

      </div>

      <script>
         var app = angular.module("plunker",[]);
          app.controller("MainCtrl",['$scope',function($scope){
            $scope.options = [
              {id:1, name:'01:00 AM'},
              {id:2, name:'02:00 AM'},
              {id:3, name:'03:00 AM'},
              {id:4, name:'04:00 PM'},
              {id:5, name:'05:00 AM'},    
              {id:6, name:'06:00 AM'},
              {id:7, name:'07:00 AM'},
              {id:8, name:'08:00 AM'},
              {id:9, name:'09:00 PM'},
              {id:10, name:'10:00 AM'},
              {id:11, name:'11:00 AM'},
              {id:12, name:'12:00 PM'},
              {id:13, name:'01:00 PM'},    
              {id:14, name:'02:00 PM'},
              {id:15, name:'03:00 PM'},
              {id:16, name:'04:00 PM'},
              {id:17, name:'05:00 PM'},
              {id:18, name:'06:00 PM'},
              {id:19, name:'07:00 PM'},
              {id:20, name:'08:00 PM'},
              {id:21, name:'09:00 PM'},    
              {id:22, name:'10:00 PM'},
              {id:23, name:'11:00 PM'},
              {id:24, name:'00:00 --'}]   

              $scope.test = function()
              {
                     var result=0,id2,a,b;



                         angular.forEach($scope.selects, function(value)
                         { // loop over array to process all items
                            a = value.selected_id1;
                            b = value.selected_id2;
                            if((a!="") && (b!=""))
                            {
                                result +=(parseInt(b)-parseInt(a));
                            }
                            if(result < 0)
                            {
                                result = 24+result;
                            }
                            else
                            {
                                result = result;
                            }
                            alert("time result is"+result);
                        });
                        return result;
              }

             // function to calculate total Date ..........................................................
              $scope.dateResult = function() 
              {
                   var dateResult =0,firstdate=0,seconddate=0,result=0,id2,a,b,extradays=0;

                        angular.forEach($scope.selects, function(value, key) 
                        {
                            firstdate = value.var1;
                            seconddate = value.var2;
                            a = value.selected_id1;
                            b = value.selected_id2;

                            dateResult +=((seconddate-firstdate)/3600/1000/24);

                            if((a!="") && (b!=""))
                            {
                                result +=(parseInt(b)-parseInt(a));

                            }
                            if(result<0)
                            {
                                result = 24+result;
                                dateResult = dateResult-1;
                            }
                            alert("date result is"+dateResult);
                        });
                    return dateResult;
             }


               $scope.selects = [{}]; // default 1 sets
            // functions to ADD/Remove --------------------------------------------------------------------------------
              $scope.add = function() 
              {
                        $scope.selects.push({});
              }

              $scope.remove = function(item) 
              {
                        angular.forEach($scope.selects, function(value, key) 
                        {
                            if (value == item) 
                            {
                                $scope.selects.splice(key, 1);
                            }
                        });
             }
            // functions to ADD/Remove --------------------------------------------------------------------------------

        }]);

    app.directive('datetimez', function() {
        return {
            restrict: 'A',
            require : 'ngModel',
            link: function(scope, element, attrs, ngModelCtrl) {
              element.datetimepicker({
                dateFormat:'dd/MM/yyyy',
                language: 'pt-BR'
              }).on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.date);
                scope.$apply();
              });
            }
        };
    });

      </script>
      </body>

    </html>

http://plnkr.co/edit/inkEeWIe2wDUIFkFBVoy?p=preview

1 个答案:

答案 0 :(得分:1)

您可以执行以下代码

  $scope.date = $filter("date")(Date.now(), 'yyyy-MM-dd');

您也可以查看此链接进行演示。 http://plnkr.co/edit/E5ctclikbwDviOhHrkHO?p=preview

快乐编码:)