如何将日期和时间分成两个元素？

Posted 2023-02-25

【中文标题】如何将日期和时间分成两个元素？

【英文标题】：How do I split the date and time into two elements?

【发布时间】：2015-05-16 13:34:14

【问题描述】：

我制作了一个显示实时日期和时间的对象。

我想知道如何将时间部分与日期分开，以便我可以将它放在它自己的 html 元素中，以便我可以对其应用不同的样式？

我对 javascript 不是很熟练，而且我发现使用日期对象非常复杂。

LiveDateTime.js

'use strict';

function LiveDateTime(dateEl, options) 
    this.dateEl = dateEl;
    this.options = options;

    this.timestamp;
    this.offset;

    this.start();


LiveDateTime.prototype = 
    start: function () 
        var now = !this.timestamp ? new Date() : new Date(this.timestamp),
            self = this;

        (function update() 
            self.dateEl.innerHTML = now.toLocaleString(self.options.locale, self.options);

            now.setSeconds(now.getSeconds() + 1);

            self.timeoutId = setTimeout(update, 1000);
        )();
    ,

    stop: function () 
        clearTimeout(this.timeoutId);

        this.timeoutId = undefined;
    
;

用法

var liveDateTime = new LiveDateTime(document.getElementById('date'), 
    locale: 'FR',
    weekday: 'long',
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
);

//output example: vendredi 13 mars 2015 23:14:12 

HTML

<span id="date"></span> - <span id="time"></span>

【问题讨论】：

签入momentjs。它会让你的生活更轻松。

日期对象非常简单。他们有一个time value，它是自一个纪元以来的毫秒数和一个来自系统设置的偏移量。它也有很多方便的方法来做一些事情，但它不能很好地格式化值。这就是您可能需要一些帮助的地方，但是有一些方法可以编写时间和日期（根据 QuentinUK 的回答），或者您可以使用 getHours、getMinutes等方法自己格式化它们>、getFullYear、getMonth 等

【参考方案1】：

日期部分使用date.toLocaleDateString()，时间部分使用date.toLocaleTimeString()。

【讨论】：

toLocale 方法的问题在于，您永远不知道从主机到主机会得到什么。 Safari 和 OmniWeb：2015 年 3 月 14 日，Firefox：14/3/2015，Chrome：3/14/2015，IE： 2015 年 3 月 14 日星期六。

如果你想要，你必须制作自己的 toLocale 版本。如果您想用文字表达几天和几个月，这并不容易。

@RobG 是的，但我认为只有当你没有给它任何格式选项时。

@RobG，格式化选项是最近添加的，它只是在 IE（版本 11）中，还没有在 Safari 中。

@KidDiamond——ECMA-262 ed 5 或 ed 6 草案中没有格式化选项，因此浏览器持续提供它们需要很长时间。就目前而言，toLocaleString 的结果完全依赖于实现，并且在不同的浏览器中是不同的。编写一个函数来生成特定格式的日期字符串很简单。

【参考方案2】：

您可以使用 Date 可用的方法来格式化您的日期：

var now = new Date()
var date = now.toLocaleDateString();
var time = now.toLocaleTimeString();
console.log(date + ' ' + time)

【参考方案3】：

我对 JavaScript 不是很熟练，而且我发现使用日期对象非常复杂。

在 JS 中处理日期确实很复杂且令人沮丧。但使用 momentjs 等库可能会很有趣

以便根据需要格式化日期：

moment().format('dddd Do MMMM YYYY'); // vendredi 13 mars 2015   (with FR locale)
                                      // Friday 13th March 2015  (with EN locale)

为了获得时间：

moment().format('H:mm:ss'); // 23:36:15

这些只是图书馆可能性的小例子。

其他格式化模式请参考this table of the documentation

【参考方案4】：

你可以使用javascript的split()方法

var date = liveDateTime.split(" ");
    var weekday = date[0];
    var day = date[1];
    var month = date[2];
    var year = date[3];
var time = date[4].split(":");
    var hour = time[0];
    var minute = time[1];
    var second = time[2];