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

Question

i am new in angular Js, and unable to set default value in dropdown list and trying to current date value in input box , but after much R&D i am not getting some result. 我是角度Js的新手，无法在下拉列表中设置默认值并无法尝试在输入框中输入当前日期值，但是经过大量的研发，我没有得到任何结果。 can anybody please check this plunker code to sort out the program . 任何人都可以检查此代码以整理程序。

    <!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 http://plnkr.co/edit/inkEeWIe2wDUIFkFBVoy?p=preview

Answer 1

You can do code like below 您可以执行如下代码

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

And also you can check this link for demo. 您也可以检查此链接以进行演示。 http://plnkr.co/edit/E5ctclikbwDviOhHrkHO?p=preview http://plnkr.co/edit/E5ctclikbwDviOhHrkHO?p=preview

Happy Coding :) 快乐编码:)

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

问题描述

1 个解决方案

解决方案1
1 2015-07-28 10:29:28

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

问题描述

1 个解决方案

解决方案1 1 2015-07-28 10:29:28

解决方案1
1 2015-07-28 10:29:28