使用当前日期自动填充TextBox

时间:2016-01-29 19:07:15

标签: javascript jquery angularjs html5 visual-studio

我在aspx页面中使用AngularJS,HTML5来创建访客登记信息: -

   <div style="border: dotted 1px grey; padding: 20px 0 20px 0; width: 40%;">
                <div class="row" style="margin-left: 30px">
                    <div style="display: inline-block;">
                        Visitor: 
                    </div>
                    <div style="display: inline-block; margin-left: 28px; width: 383px;">
                        <input type="text" data-ng-model="currentUser.Visitor">
                    </div>
                </div>
                <div style="margin-top: 20px"></div>
                <div class="row" style="margin-left: 30px">
                    <div style="display: inline-block;">
                        Title: 
                    </div>
                    <div style="display: inline-block; margin-left: 40px;">
                        <input type="text" data-ng-model="currentUser.Title">
                    </div>
                </div>
                <div style="margin-top: 20px"></div>
                <div class="row" style="margin-left: 30px">
                    <div style="display: inline-block;">
                        Visitee: 
                    </div>
                    <div style="display: inline-block; margin-left: 24px;">
                        <input type="text" data-ng-model="currentUser.Visitee">
                    </div>
                </div>
                <div style="margin-top: 20px"></div>
                <div class="row" style="margin-left: 30px">
                    <div style="display: inline-block;">
                        Arrival:
                    </div>
                    <div style="display: inline-block; margin-left: 25px;">
                        <input type="text" data-ng-model="currentUser.Arrival">
                    </div>
                </div>
                <div style="margin-top: 20px"></div>
                <div class="row" style="margin-left: 30px">
                    <div style="display: inline-block;">
                        Departure:
                    </div>
                    <div style="display: inline-block; margin-left: 0px;">
                        <input type="text" data-ng-model="currentUser.Departure">
                    </div>
                </div>
            </div>

            <div>
                <div style="margin: 2% 0 0 8%; display: inline-block">
                    <button data-ng-click="addNew(currentUser)" class="btn btn-primary" type="button">Add New Check-in</button>
                </div>

JSFiddle

我希望抵达的字段自动填充 ...所以在我的Main.JS中,我想说: -

var now = new Date();
$scope.currentUser.Arrival = now.format("dd/MM/yyyy, hh:mm tt");

now.format()...不是原生的js ...但是该功能按原样工作,只是没有填充到文本框中。

但这不起作用......它会禁用我的角度网格以及之前输入的所有数据.. Main.JS的开头就像: -

 var app = angular.module('myApp', ['ngTouch', 'ui.grid']);
 app.controller('UserController', ['$scope', function ($scope) {
 var now = new Date();
 $scope.currentUser.Arrival = now.format("dd/MM/yyyy, hh:mm tt");
 $scope.gridOptions = {
    data: 'userList',
    columnDefs: [{ field: 'Visitor', displayName: 'Visitor' },
        { field: 'Title', displayName: 'Type of Visit' },
        { field: 'Visitee', displayName: 'Visitee' },
        {field: 'Arrival', displayName: 'Arrival Time'},
        {field: 'Departure', displayName: 'Departure Time'}]
  };... etc etc... fucntionalities....

1 个答案:

答案 0 :(得分:1)

当我在JSFiddle中运行它时,我得到的错误是now.format不是函数。

您不能使用Angular $过滤器的原因?将它传递给你的控制器:

app.controller('UserController', ['$scope', '$filter', function ($scope,$filter) {

然后指定日期:

$scope.currentUser.Arrival = $filter('date')(new Date(),'dd/MM/yyyy, hh:mm a');

另外,另一方面注意,根据您提供的内容,currentUser尚未针对$ scope定义,因此不会分配Arrival属性。如果您已经定义了$ scope.currentUser,那么您就是好的。否则,您可能希望它看起来像:

$scope.currentUser = {};
$scope.currentUser.Arrival = $filter('date')(new Date(),'dd/MM/yyyy, hh:mm a');