Question

我有一个angularjs UI，要求用户输入日期和时间。现在我想将两者合并为一种日期类型，以便我可以将其发送到REST API。我该怎么做？

我的HTML代码是

from django.core.exceptions import ValidationError

如何在控制器中执行此操作？我应该只连接两个ng模型吗？

Answer 1

无需添加到输入字段，您可以为日期和时间使用一个输入字段，这里是code

<html>
  <head>
    <title>User Input</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading... </my-app>
  </body>

</html>

您需要导入app / boot

Answer 2

你可以结合日期和时间通过以下方式输入时间 -

<input type="datetime-local" name="dateTime" id="exampleInput3" ng-model="UIcontroller.JobDataModel.datetime">

希望这会让你感到高兴。

Answer 3

您可以通过先创建日期时间字符串，然后将其解析为日期来创建日期时间字符串，从而组合日期和时间。

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
  function($scope) {
    $scope.UIcontroller = {
      JobDataModel: {
        date: new Date(),
        time: new Date()
      }
    };
    $scope.result = '';

    $scope.updateResult = function() {
      var myDate = $scope.UIcontroller.JobDataModel.date,
        myTime = $scope.UIcontroller.JobDataModel.time,
        combinedDateString = (myDate.toDateString() + " " + myTime.toTimeString()),
        combinedDate = new Date(combinedDateString);

      $scope.result = combinedDate;
    }

    $scope.updateResult();
  }
]);

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>
  <form ng-app="myApp" ng-controller="myController">
    <div class="col-md-7">
      <input type="date" class="form-control" id="myDate" ng-model="UIcontroller.JobDataModel.date" placeholder="yyyy-mm-dd" ng-change='updateResult()' required/>
    </div>

    <div class="col-md-7">
      <input type="time" class="form-control" id="myTime" ng-model="UIcontroller.JobDataModel.time" placeholder="hh:mm:ss:" ng-change='updateResult()' required/>

      <div>Result: [{{result.toString()}}]</div>
    </div>
    </div>
  </form>
</body>

</html>

＆＃13;

Answer 4

试试这个...为您的输入字段添加"ng-model-options="{ getterSetter: true }" 例如：

<input type="date" id="exampleInput" ng-model="UIcontroller.JobDataModel.date"
      placeholder="yyyy-mm-dd" ng-model-options="{ getterSetter: true }" required/>

将getterSetter设置为true后，您可以访问控制器中用户输入的值...

  var _date = new Date();
  var _time = new Date();
  $scope.UIcontroller = {};
  $scope.UIcontroller.JobDataModel = {
    date: function(newDate) {
      return arguments.length ? (_date = newDate) : _date;

    },
    time: function(newTime) {
      return arguments.length ? (_time = newTime) : _time;

    },
    finalDate: function() {
      return (_date.getMonth() + 1) + '/' + _date.getDate() + '/' + _date.getFullYear() + ' ' + _time.getHours() + ':' + _time.getMinutes();
    }

  };

您可以在此处查看我的粗略解决方案：https://plnkr.co/edit/BjXL114HLl2qMqy0wpOR?p=preview

祝你好运！

如何将输入类型日期和输入类型时间合二为一

4 个答案: