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

【问题标题】：How do I combine input type date and input type time in one如何将输入类型日期和输入类型时间合二为一
【发布时间】：2016-11-10 06:30:09
【问题描述】：

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

我的html代码是

<div class="col-md-7">
     <input type="date" id="exampleInput" ng-model="UIcontroller.JobDataModel.date"
      placeholder="yyyy-mm-dd" required/>

<div class="col-md-7">
    <input type="time" id="exampleInput1" ng-model="UIcontroller.JobDataModel.time"
     placeholder="hh:mm:ss:" required/>

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

【问题讨论】：

如果我们不知道 REST 后端期望的格式，我们无法告诉您怎么做。但是，JavaScript 中的 Date 是日期和时间的组合。你绝对可以创建一个Date 对象来保存这两个值。

标签： javascript angularjs date time

【解决方案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

【讨论】：

【解决方案2】：

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

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

希望这对你有帮助。

【讨论】：

【解决方案3】：

试试这个...为您的输入字段添加"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】：

您可以组合日期和时间，方法是先将两者连接起来创建一个日期时间字符串，然后再将其解析为日期。

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();
  }
]);

<!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>

【讨论】：