从几个不同时区中的用户收集一天中的时间

Question

我有一个应用程序，我想让用户每天选择他们想开会的时间（从某种意义上意义上）我们可以选择大多数用户可用的时间。

用户处于不同的时区。我想构建一个HTML5/JavaScript界面，该接口可以直接收集一天中的这种时间，并考虑到时间差异，以便我可以以轻松查看的方式收集数据将所有人聚在一起的最佳时间？

请考虑以下内容：

• 我想在可用的地方使用支持的HTML5表单字段和语义标签，而不是在JavaScript中进行许多辅助计算。
• 我想在用户当前时区显示时间选择，但以某种标准化的方式存储数据以比较跨时区。

我有一种觉得JavaScript日期toLocale...函数在这里会有所帮助，但仍然看不到非常简单的方法来实现此操作。优雅的解决方案赞赏。

Answer 1

进行了一些研究后，事实证明这一刻。JS非常适合此问题。

例如，我可以在UTC的固定时间生成瞬间列表：

# Default time selections: 9AM EST to 11PM EST
m = moment.utc(hours: 9 + 5).local()
return (m.clone().add('hours', x) for x in [0..14])

然后，我可以在用户的时区显示这些时间，同时将结果存储在固定时区（例如，使用车把）：

<option value="" disabled selected>Select a time</option>    
{{#each momentList}}
    <option value="{{valueFormatted}}">{{displayFormatted}}</option>
{{/each}}

各自的助手是

# Store all values in GMT-5
Template.tsTimeOptions.valueFormatted = -> @zone(300).format('HH ZZ')
# Display values in user's timezone
Template.tsTimeOptions.displayFormatted = -> @local().format('hA [UTC]Z')

这将生成HTML如下：

<select name="pickTime1" class="input-medium" required="">
    <option value="" disabled="" selected="">Select a time</option>    
    <option value="09 -0500">6AM UTC-08:00</option>    
    <option value="10 -0500">7AM UTC-08:00</option>    
    <option value="11 -0500">8AM UTC-08:00</option>    
    <option value="12 -0500">9AM UTC-08:00</option>    
    <option value="13 -0500">10AM UTC-08:00</option>    
    <option value="14 -0500">11AM UTC-08:00</option>    
    <option value="15 -0500">12PM UTC-08:00</option>    
    <option value="16 -0500">1PM UTC-08:00</option>    
    <option value="17 -0500">2PM UTC-08:00</option>    
    <option value="18 -0500">3PM UTC-08:00</option>    
    <option value="19 -0500">4PM UTC-08:00</option>    
    <option value="20 -0500">5PM UTC-08:00</option>    
    <option value="21 -0500">6PM UTC-08:00</option>    
    <option value="22 -0500">7PM UTC-08:00</option>    
    <option value="23 -0500">8PM UTC-08:00</option>
</select>

这实现了询问用户在其时区中的时间的目标，同时以可以汇总的通用格式存储所有结果。