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

Question

我在 vue.js 代码中分别使用日期选择器和时间选择器（使用 element.io）我的日期选择器和时间选择器给我的价值是：日期 = ""2018-01-19T00:00:00.000Z" 时间 =“2018-05-20T00:06:30.000Z 日期和时间都是对象形式... 现在我想创建新对象 dataTime = "2018-01-19T00:06:30.000Z"

如何创建这个然后将其转换为 ISOStrinh 格式？

Answer 1

您可以使用 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

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

您可以按如下方式使用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 5

这里的大多数答案都没有考虑 夏令时。如果日期和时间不在相同的夏令时规则中，则将日期和时间与 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;
};

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

How to concat date picker value and time picker value in single element?

momentjs

vue.js

element-io