javascript - 如何在不使用整个日期的情况下仅将时间(类型为字符串)转换为 UTC 时间格式？

Question

从中午 12 点到晚上 11:30，我有一个本地时间的下拉选项:

<select> 
<option value="12:00am">12:00am</option>
<option value="12:30am"/>12:30am</option>
<option value="1:00am"/>1:00am</option>
<option value="1:30am"/>1:30am</option>
<option value="2:00am"/>2:00am</option>
.....
.....
.....
<option value="11:30pm">11:30pm</option>
</select>

<select> 
    <option value=this.getUTCVal("12:00am")>this.getUTCVal("12:00am")</option>
    .....
    .....
    .....
    <option value=this.getUTCVal("11:30pm")>this.getUTCVal("11:30pm")</option>
    </select>

这些值在数组中:

var arr=["12:00am","12:30am"....."11:30pm"];

允许选择日期的日期选择器:

DatePicker 是一个 react-datepicker- https://www.npmjs.com/package/react-datepicker

<DatePicker
                        startDate={startDateVal}
                        endDate={endDateVal} />

我想为所有值显示等效的 UTC 时间。所以我查看了资源，其中大部分使用带日期转换的标准格式。

date = new Date(); 
var now_utc =  Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
 date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());

 return new Date(now_utc);

但是我没有完整的日期，我只能将时间值作为参数传递给函数。我试过:

getUTCVal(val) {
  Math.floor(new Date().getTime() / 1000) // which give me current time
}

我也试过:

var datestring = "1:00";
new Date(datestring); //gives me invalid date

现在我不确定如何在没有实际日期的情况下转换时间..

知道如何解决这个问题吗？

Answer 1

在将用户选择的时间从本地时间转换为 UTC 之前，您需要获取用户选择的日期作为上下文。然后，只需使用用户选择的日期和时间创建一个 Date 对象，以便您可以使用 getUTCHours 和 getUTCMinutes< 检索 UTC 时间部分.

下面是一个带有任意输入日期和时间的示例(您只需要从您的输入中获取用户选择的 inputDate 和 inputHour 值)。另请注意，您可能需要根据日期选择器控件生成的数据格式调整输入日期的处理方式。

const getUTCTime = (d) => `${d.getUTCHours()}:${d.getUTCMinutes()} UTC`;
const inputDate = '2018-10-22';
const inputTime = '1:30PM';
const [y, m, d] = inputDate.split('-');
const date = new Date(y, m - 1, d);
let [hh, mm] = inputTime.match(/\d+/g).map((x) => parseInt(x));
let [ap] = inputTime.match(/[a-z]+/i);
ap = ap.toLowerCase()
if (ap === 'pm') {
  hh = hh < 12 ? hh + 12 : 0;
}

date.setHours(hh, mm);
console.log(getUTCTime(date));