jQuery UI日期选择器 - 更改日期格式

Question

我正在使用jQuery UI的UI DatePicker作为独立选择器。我有以下代码：

<div id="datepicker"></div>

并且以下JS代码：

$('#datepicker').datepicker();

当我尝试使用以下代码返回值时：

var date = $('#datepicker').datepicker('getDate');

我得到的结果是：

Tue Aug 25 2009 00:00:00 GMT+0100 (BST)

这完全是错误的格式。是否有一种方法可以将其返回为DD-MM-YYYY格式？

- tarnfeld

---

完美的，谢谢。为什么$.datepicker.formatDate("yy-mm-dd", new Date(2007, 1 - 1, 26));在文档中没有起作用？ - Hein du Plessis

Answer 1

这里有一个特定于您的代码的示例：

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

更一般的信息可以在这里找到:

• http://api.jqueryui.com/datepicker/#option-dateFormat
• http://api.jqueryui.com/datepicker/#utility-formatDate

- AvatarKava

---

这让我得到了与我在日期选择器中指定的格式相同的格式，但不是dd-mm-yy。使用1.10版本。下面的答案可以正常工作。 - Tommy

“yy” 给我返回了“2015”，我该如何只获取到“15”？ - SearchForKnowledge

@SearchForKnowledge 只需使用 y。[datepicker-formatting]（https://api.jqueryui.com/datepicker/#utility-formatDate） - Shadoath

请注意，如果您之前已经定义了不同的格式，则此方法将无法正常工作。您应该使用以下代码：$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()。 - João Pimentel Ferreira

在旧版本中，format: 'dd-mm-yyyy'应该有效。 - TarangP

Answer 2

只需将代码粘贴到 jQuery 脚本代码中即可。

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

这应该可以工作。

- sampath

---

.selector 和 #datepicker 不一样。直接复制你的代码可能行不通。 - Dave Jarvis

Answer 3

getDate 方法返回的是一个日期类型，而不是一个字符串。您需要使用您的日期格式将返回的值格式化为字符串。使用 datepicker 的 formatDate 函数：

var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);

日期格式化字符串的完整列表在此处可用。

- kcsoft

Answer 4

这里是带有日期格式（yy/mm/dd）的日期选择器的完整代码。

复制下面的链接并粘贴到头部标签中：

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
       });
   </script>

复制以下代码并粘贴在 body 标签之间：

      Date: <input type="text" id="datepicker" size="30"/>    

如果您想要两个(2)文本输入框，比如开始日期和结束日期，那么可以使用这个脚本，并改变日期格式。

   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

   <script type="text/javascript">
       $(function() {
               $("#startdate").datepicker({ dateFormat: "dd-mm-yy" }).val()
               $("#enddate").datepicker({ dateFormat: "dd-mm-yy" }).val()
       });

   </script>  

两个输入文本，例如：

      Start Date: <input type="text" id="startdate" size="30"/>    
      End Date: <input type="text" id="enddate" size="30"/>

- Nasirali

Answer 5

dateFormat

The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.

Code examples Initialize a datepicker with the dateFormat option specified.

$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });

Get or set the dateFormat option, after init.

//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

- user369661

---

在这个例子中，第一行代码使“日期选择器”使用特定的日期格式，而不是默认的美国 mm/dd/yy 格式。 - Ryan

@Ryan，对我不起作用，你有包含所有代码行的示例吗？请帮我看一下。 - knocte

Answer 6

getDate函数返回一个JavaScript日期。使用以下代码格式化此日期：

var dateObject = $("#datepicker").datepicker("getDate");
var dateString = $.datepicker.formatDate("dd-mm-yy", dateObject);

它使用一个内置于 datepicker 中的实用函数:

$.datepicker.formatDate( format, date, settings ) - 使用指定格式将日期格式化为字符串。

完整的格式说明列表在此处可用。

- Salman A

---

如果您丰富了@kcsoft的回答（就像我要做的那样），而不是发布新答案，那会更好 ;) - bluish

Answer 7

< p > $("#datepicker").datepicker("getDate") 返回一个日期对象，而不是字符串。

var dateObject = $("#datepicker").datepicker("getDate"); // get the date object
var dateString = dateObject.getFullYear() + '-' + (dateObject.getMonth() + 1) + '-' + dateObject.getDate();// Y-n-j in php date() format

- Catalin

Answer 8

<script type="text/javascript">
  $(function() {
    $( "#date" ).datepicker( {minDate: '0', dateFormat: 'yy-dd-mm' } );
  });
</script>

- Muddasir Abbas

Answer 9

Try to use the

$( ".selector" ).datepicker({ dateFormat: 'dd/mm/yy' });  

有许多选项可用于日期选择器，您可以在此处找到它。

http://api.jqueryui.com/datepicker/

这是我们使用参数调用日期选择器的方式。

$(function() {
      $('.selector').datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            numberOfMonths: 1,
            buttonImage: 'contact/calendar/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                 // we can write code here 
             }
      });
});

- Ritesh d joshi

Answer 10

$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()

- sad