如何在单个元素中连接日期选择器值和时间选择器值？

Question

我在 vue.js 代码中分别使用日期选择器和时间选择器。我的日期选择器和时间选择器给我的值是：

date = "2018-01-19T00:00:00.000Z"
time = "2018-05-20T00:06:30.000Z

日期和时间都是对象形式，我想从中创建一个新对象，如下所示：

dataTime = "2018-01-19T00:06:30.000Z"

如何创建它然后将其转换为 ISO 字符串格式？

Answer 1

您可以使用date-fns，如下所示：

import {formatISO} from 'date-fns';

const date = new Date();
const time = new Date();
const newDate = formatISO(date, {representation: 'date'});
const newTime = formatISO(time, {representation: 'time'});
const dateTime = `${newDate}T${newTime}`

Answer 2

您可以使用momentjs（http://momentjs.com/）：

var date = moment(dateObject).format("YYYY-MM-DD");
var time = moment(dateObject).format("HH:mm:ss");

Answer 3

您可以使用纯 Javascript 来完成此操作，不需要像 moment.js 这样的库。

这是一个详细的示例，可以简化...

getDateTime($d,$t){
   let date = $d; //i.e. "2018-01-19T00:00:00.000Z";
   let time = $t; //i.e. "2018-05-20T00:06:30.000Z";

   date = date.split('T').slice(0,1);
   time = time.split('T').slice(1);

   return date + 'T' + time;
}

Answer 4

这里的大多数答案都没有考虑夏令时。如果日期和时间不在同一个夏令时规则中，则用

T

连接日期和时间将会得到错误的结果。根据时区规则，您的休息时间将是一个小时。这是避免夏令时问题的简单方法：

const mergeDateAndTime = (date, time) => {
  const newDate = new Date(date);

  newDate.setHours(time.getHours());
  newDate.setMinutes(time.getMinutes());
  newDate.setSeconds(time.getSeconds());
  newDate.setMilliseconds(0);

  return newDate;
};

Answer 5

你可以使用moment.js:

var firstvar="2018-01-19T00:00:00.000Z";
var secondvar="2018-05-20T00:06:30.000Z";
var thirdvar=moment(firstvar).format("YYYY-MM-DD") + moment(secondvar).format("THH:mm:ssZ");

首先将

datetime

和

date

上的

time

对象分开，然后将其连接在一起

thirdvar

将导致

2018-01-19T00:06:30.000Z