React TypeScript中修改时间选择器返回指定时间格式的方案咨询

需求：修改React TypeScript代码，让时间选择器的输入值返回类似「Thu Jan 01 2022 13:03:00 GMT-0500 (Eastern Standard Time)」的格式。

现有核心代码：

function getTimeStringFromPicker(timePicker) {
    const selects = getSelectsFromPicker(timePicker);

    return `${selects.hour.value}:${selects.minute.value} ${selects.meridiem.value}`;
}

function numberToOption(number) {
    const padded = number.toString().padStart(2, "0");

    return `<option value="${padded}">${padded}</option>`;
}

activate();

实现方案 #

要生成目标格式，本质是通过Date对象的toString()方法实现。需要先将选择器的12小时制时间转换为24小时制，再结合日期构造Date对象。

修改后的getTimeStringFromPicker函数如下：

function getTimeStringFromPicker(timePicker: HTMLElement): string {
    const selects = getSelectsFromPicker(timePicker);
    
    // 解析选择器的时分与上下午
    let hour: number = parseInt(selects.hour.value, 10);
    const minute: number = parseInt(selects.minute.value, 10);
    const meridiem: string = selects.meridiem.value;
    
    // 12小时制转24小时制
    if (meridiem === 'PM' && hour !== 12) {
        hour += 12;
    } else if (meridiem === 'AM' && hour === 12) {
        hour = 0;
    }
    
    // 方式1：使用指定日期（如示例中的2022年1月1日）
    const targetDate = new Date(2022, 0, 1, hour, minute); // 月份为0基索引，1月对应0
    
    // 方式2：使用当前日期
    // const now = new Date();
    // const targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, minute);
    
    // 返回目标格式字符串
    return targetDate.toString();
}

关键说明 #

• 12小时制转24小时制：PM时段除12点外，小时数加12；AM时段的12点转为0点，保证时间格式正确。
• 构造Date对象：若需要固定日期，直接传入指定年、月、日；若需结合当前日期，通过new Date()获取当前年、月、日参数。
• Date.toString()方法会自动生成包含时区信息的目标格式字符串，无需手动拼接。

内容的提问来源于stack exchange，提问作者Vamsy