jQuery日期格式答案

【问题标题】：jQuery date formattingjQuery日期格式
【发布时间】：2011-07-12 03:17:32
【问题描述】：

如何使用 jQuery 格式化日期。我正在使用以下代码，但出现错误：

 $("#txtDate").val($.format.date(new Date(), 'dd M yy'));

请提出解决方案。

【问题讨论】：

Microsoft JScript 运行时错误：'$.format' 为空或不是对象
您是否包含了包含格式功能的插件？
yyyy-mm-dd 偷偷摸摸的一个班轮：new Date().toJSON().substring(0,10)
是 fformat（双 f）
警告！光滑的代码：new Date().toJSON().substring(0,10) 工作得很好，但它返回的日期为 GMT！由于我们比格林威治标准时间晚 7 小时，我在下午 5:00 之后得到了错误的日期。我只是浪费了几个小时来寻找原因/叹气/。 Reference

标签： jquery

【解决方案1】：

jQuery dateFormat 是一个单独的插件。您需要使用 <script> 标记显式加载它。

【讨论】：

@Dotnet 当然，使用其他功能：参见例如here
@Dotnet 如果可以使用 jQuery 来完成，就不会有 jQuery 的日期格式化插件，对吗？
我不知道这是否应该是个玩笑……这简直太棒了@pekka。此外，这是正确的答案。
jQuery dateFormat 不适用于 jQuery Validate。纯 JavaScript 版本都不是。
很难相信 vanilla jQuery 没有格式化日期的功能。这个问题5年了，现在还是这样吗？

【解决方案2】：

就用这个吧：

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);

【讨论】：

注意，这会给你一个过去一个月的日期（除非它是在一月份访问的，在这种情况下它会给你一个月的'00'），因为 date.getMonth() 是从零开始的索引。

【解决方案3】：

看这里：

https://github.com/mbitto/jquery.i18Now

此 jQuery 插件可帮助您根据自己的喜好格式化和翻译日期和时间。

【讨论】：

【解决方案4】：

在您的页面中添加 jquery ui 插件。

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));

【讨论】：

这是我一直在寻找的答案，尤其是因为我在其他地方使用 jQuery UI。
有什么办法可以得到日期+2年吗？
var currentDate = new Date(); currentDate.setFullYear(currentDate.getFullYear() + 2);
可惜不支持时间格式化=S
这里是官方文档的链接：api.jqueryui.com/datepicker/#utility-formatDate

【解决方案5】：

ThulasiRam，我更喜欢你的建议。它在稍微不同的语法/上下文中对我很有效：

var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());

如果您决定使用来自 JQuery UI 的日期选择器，请确保在文档的

部分中使用正确的引用：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

【讨论】：

【解决方案6】：

如果您不想使用 jQuery/jQuery 插件，另一种选择是简单的 js date() 函数：

例如：

var formattedDate = new Date("yourUnformattedOriginalDate");
var d = formattedDate.getDate();
var m =  formattedDate.getMonth();
m += 1;  // JavaScript months are 0-11
var y = formattedDate.getFullYear();

$("#txtDate").val(d + "." + m + "." + y);

见：10 ways to format time and date using JavaScript

如果您想在日/月中添加前导零，这是一个完美的示例： Javascript add leading zeroes to date

如果你想用前导零添加时间，试试这个： getMinutes() 0-9 - how to with two numbers?

【讨论】：

像@sein 那样添加秒数会很方便
这很好，直到用户想要最近的日期或将日期输入Date 对象。以相同的格式获取日期但比喂食日期早 6 个月怎么样？

【解决方案7】：

这是我刚刚制作的一个非常基本的功能，不需要任何外部插件：

$.date = function(dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date = day + "/" + month + "/" + year;

    return date;
};

用途：

$.date(yourDateObject);

结果：

dd/mm/yyyy

【讨论】：

感谢超级酷好用我试过完美工作

【解决方案8】：

我不太确定我是否可以回答 2 年前提出的问题，因为这是我在 stackoverflow 上的第一个答案，但这是我的解决方案；

如果您曾经从 MySQL 数据库中检索过日期，请将其拆分，然后使用拆分后的值。

$(document).ready(function () {
    var datefrommysql = $('.date-from-mysql').attr("date");
    var arraydate = datefrommysql.split('.');
    var yearfirstdigit = arraydate[2][2];
    var yearlastdigit = arraydate[2][3];
    var day = arraydate[0];
    var month = arraydate[1];
    $('.formatted-date').text(day + "/" + month + "/" + yearfirstdigit + yearlastdigit);
});

这是fiddle。

【讨论】：

【解决方案9】：

我正在使用Moment JS。非常有用且易于使用。

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10

【讨论】：

【解决方案10】：

我希望这段代码能解决你的问题。

var d = new Date();

var curr_day = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();

curr_month++ ; // In js, first month is 0, not 1
year_2d = curr_year.toString().substring(2, 4)

$("#txtDate").val(curr_day + " " + curr_month + " " + year_2d)

【讨论】：

【解决方案11】：

在创建日期选择器时使用 dateFormat 选项。

$("#startDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'yy/mm/dd'
                });

【讨论】：

【解决方案12】：

虽然这个问题是几年前提出的，但不再需要 jQuery 插件，只要所讨论的日期值是格式为 mm/dd/yyyy 的字符串（就像使用日期选择器时一样）；

var birthdateVal = $('#birthdate').val();
//birthdateVal: 11/8/2014

var birthdate = new Date(birthdateVal);
//birthdate: Sat Nov 08 2014 00:00:00 GMT-0500 (Eastern Standard Time)

【讨论】：

【解决方案13】：

这是我在浏览器上展示的完整代码示例，希望对您有所帮助，谢谢。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker" ).datepicker({
                minDate: -100,
                maxDate: "+0D",
                dateFormat: 'yy-dd-mm',
                onSelect: function(datetext){
                    $(this).val(datetext);
                },
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker"></p>
   </body>
</html>

【讨论】：

【解决方案14】：

你可以利用这个sn-p

$('.datepicker').datepicker({
  changeMonth: true,
  changeYear: true,
  yearRange: '1900:+0',
  defaultDate: '01 JAN 1900',
  buttonImage: "http://www.theplazaclub.com/club/images/calendar/outlook_calendar.gif",
  dateFormat: 'dd/mm/yy',
  onSelect: function() {
    $('#datepicker').val($(this).datepicker({
      dateFormat: 'dd/mm/yy'
    }).val());
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>
  selector: <input type="text" class="datepicker">
</p>
<p>
  output: <input type="text" id="datepicker">
</p>

【讨论】：

【解决方案15】：

我们可以简单地格式化日期，

var month = date.getMonth() + 1;
var day = date.getDate();
var date1 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + date.getFullYear();
$("#txtDate").val($.datepicker.formatDate('dd/mm/yy', new Date(date1)));

其中“日期”是任何格式的日期。

【讨论】：

【解决方案16】：

您可以添加新的用户 jQuery 函数 'getDate'

JSFiddle：getDate jQuery

或者你可以运行代码sn-p。只需按此帖子下方的“运行代码 sn-p”按钮即可。

// Create user jQuery function 'getDate'
(function( $ ){
   $.fn.getDate = function(format) {

	var gDate		= new Date();
	var mDate		= {
	'S': gDate.getSeconds(),
	'M': gDate.getMinutes(),
	'H': gDate.getHours(),
	'd': gDate.getDate(),
	'm': gDate.getMonth() + 1,
	'y': gDate.getFullYear(),
	}

	// Apply format and add leading zeroes
	return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});

	return getDate(str);
   }; 
})( jQuery );


// Usage: example #1. Write to '#date' div
$('#date').html($().getDate("y-m-d H:M:S"));

// Usage: ex2. Simple clock. Write to '#clock' div
function clock(){
	$('#clock').html($().getDate("H:M:S, m/d/y"))
}
clock();
setInterval(clock, 1000); // One second

// Usage: ex3. Simple clock 2. Write to '#clock2' div
function clock2(){

	var format = 'H:M:S'; // Date format
	var updateInterval = 1000; // 1 second
	var clock2Div	= $('#clock2'); // Get div
	var currentTime	= $().getDate(format); // Get time
	
	clock2Div.html(currentTime); // Write to div
	setTimeout(clock2, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock2();

// Just for fun
// Usage: ex4. Simple clock 3. Write to '#clock3' span

function clock3(){

	var formatHM = 'H:M:'; // Hours, minutes
	var formatS = 'S'; // Seconds
	var updateInterval = 1000; // 1 second
	var clock3SpanHM	= $('#clock3HM'); // Get span HM
	var clock3SpanS	= $('#clock3S'); // Get span S
	var currentHM	= $().getDate(formatHM); // Get time H:M
	var currentS	= $().getDate(formatS); // Get seconds
	
	clock3SpanHM.html(currentHM); // Write to div
	clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span
	setTimeout(clock3, updateInterval); // Set timer 1 second
	
}
// Run clock2
clock3();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="date"></div><br>
<div id="clock"></div><br>
<span id="clock3HM"></span><span id="clock3S"></span>

享受吧！

【讨论】：

【解决方案17】：

你可以在没有插件的情况下使用下面的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
    //call the function on page load
	$( "#datepicker" ).datepicker();
    //set the date format here
    $( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");
	
    // you also can use 
    // yy-mm-dd
    // d M, y
    // d MM, y
    // DD, d MM, yy
    // &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)
	} );
 </script>

Pick the Date: <input type="text" id="datepicker">

【讨论】：

【解决方案18】：

你可以试试http://www.datejs.com/

 $('#idInput').val( Date.parse("Jun 18, 2017 7:00:00 PM").toString('yyyy-MM-dd'));

BR

【讨论】：

【解决方案19】：

将此功能添加到您的<script></script> 并从<script></script> 中的任何位置调用

<script>

function GetNow(){
    var currentdate = new Date(); 
    var datetime = currentdate.getDate() + "-"
            + (currentdate.getMonth()+1)  + "-" 
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
    return datetime;
}

window.alert(GetNow());

</script>

或者您也可以简单地使用提供格式化工具的 Jquery：-

window.alert(Date.parse(new Date()).toString('yyyy-MM-dd H:i:s'));

我喜欢第二种选择。一次性解决所有问题。

【讨论】：

第二个选项给了我“基数参数必须在 Number.toString 的 2 到 36 之间”。它崩溃了。
我们不能使用第二个选项，因为它会抛出错误

【解决方案20】：

如果你使用的是 jquery ui 那么你可以像下面这样使用它，你可以指定你自己的日期格式

$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"

【讨论】：

【解决方案21】：

你可以使用这个编码

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));

【讨论】：

不鼓励仅使用代码的答案，因为它们没有说明如何解决问题。请更新您的答案，以解释这如何改进该问题已有的许多其他已接受和赞成的答案。此外，这个问题已有 6 年历史，最近有未回答问题的用户会更加感谢您的努力。请查看How do I write a good answer。
答案没有提到需要 jQuery UI

【解决方案22】：

这对我有用，只需稍作修改，无需任何插件

输入：2018 年 4 月 11 日星期三 00:00:00 GMT+0000

$.date = function(orginaldate) { 
    var date = new Date(orginaldate);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date =  month + "/" + day + "/" + year; 
    return date;
};

$.date('Wed Apr 11 2018 00:00:00 GMT+0000')

输出：2018 年 4 月 11 日

【讨论】：

【解决方案23】：

我已经通过这个实现了，我已经在没有任何插件或日期选择器的情况下解决了这个问题。

GetDatePattern("MM/dd/yyyy");
 function GetDatePattern(pattern)
    {
    var monthNames=["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];
    
            var todayDate = new Date();
                                              
                            var date = todayDate.getDate().toString();
                            var month = todayDate.getMonth().toString(); 
                            var year = todayDate.getFullYear().toString(); 
                            var formattedMonth = (todayDate.getMonth() < 10) ? "0" + month : month;
                            var formattedDay = (todayDate.getDate() < 10) ? "0" + date : date;
                            var result = "";
    
                            switch (pattern) {
                                case "M/d/yyyy": 
                                    formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
                                    formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
    
                                    result  = formattedMonth + '/' + formattedDay + '/' + year;
                                    break;
    
                                case "M/d/yy": 
                                    formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
                                    formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
                                    result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
                                    break;
    
                                case "MM/dd/yy":
                                    result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
                                    break;
    
                                case "MM/dd/yyyy":
                                   result  = formattedMonth + '/' + formattedDay + '/' + year;
                                    break;
    
                                case "yy/MM/dd":
                                    result  = year.substr(2) + '/' + formattedMonth + '/' + formattedDay;
                                    break;
    
    
                                case "yyyy-MM-dd":
                                    result  = year + '-' + formattedMonth + '-' + formattedDay;
                                    break;
    
                                case "dd-MMM-yy":
                                   result  = formattedDay + '-' + monthNames[todayDate.getMonth()].substr(3) + '-' + year.substr(2);
                                    break;
    
                                case "MMMM d, yyyy":
                                    result  = todayDate.toLocaleDateString("en-us", { day: 'numeric', month: 'long', year: 'numeric' });
                                    break;
    
    
                            }
                            }

【讨论】：