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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29042911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 09:59:59  来源:igfitidea点击:

How do I split the date and time into two elements?

javascripthtmldate

提问by Kid Diamond

I've made an object that displays the date and time live.

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

I would like to know how I can separate the time part from the date so I can have it in its own HTML element so I can apply different styling to it?

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

I'm not that advanced with JavaScript, and I find working with the date object very complicated.

我对 JavaScript 不是很熟悉,而且我发现处理日期对象非常复杂。

LiveDateTime.js

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;
    }
};

Usage

用法

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

HTML

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

回答by QuentinUK

Use date.toLocaleDateString()for the date part, and date.toLocaleTimeString()for the time part.

使用date.toLocaleDateString()的日期部分,并date.toLocaleTimeString()在一段时间。

回答by MaxZoom

You can format your date using Date available methods:

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

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

回答by Michael P. Bazos

I'm not that advanced with JavaScript, and I find working with the date object very complicated.

我对 JavaScript 不是很熟悉,而且我发现处理日期对象非常复杂。

Working with date in JS could be indeed complicated and frustrating. But that could be a pleasure by using libraries such momentjs

在 JS 中使用 date 确实很复杂和令人沮丧。但是通过使用诸如momentjs 之类的库可能会很高兴

So as to get the date formatted as you need :

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

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

And for getting the hour :

并获得小时:

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

These are just tiny examples of the possibilities of the library.

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

For other formatting patterns, refer to this table of the documentation

对于其他格式模式,请参阅文档的此表

回答by Karwalski

You can use javascript's split()method

你可以使用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];