我使用的UI DatePicker从jQuery UI作为独立的选择器。我有这样的代码:

<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格式返回?


当前回答

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

其他回答

这里是日期格式(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>

复制以下代码并粘贴在主体标签之间:

      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"/>

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

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

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

.datepicker美元。formatDate(格式,日期,设置)- 将日期格式化为指定格式的字符串值。

格式说明符的完整列表可以在这里找到。

如果你需要年月日格式的日期,你可以使用这个:-

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

您可以找到所有受支持的格式 https://jqueryui.com/datepicker/#date-formats

我在2015年12月6日需要,我这样做了:-

$("#datepicker").datepicker({ dateFormat: "d M,y" });

如果你在input[type="text"]元素上设置了datepicker,你可能不会得到一个格式一致的日期,特别是当用户不遵循日期格式进行数据输入时。

例如,设置dateFormat为dd-mm-yy,用户输入1-1-1。datepicker将在内部将此转换为2001年1月1日,但在datepicker对象上调用val()将返回字符串“1-1-1”——与文本字段中的内容完全相同。

这意味着您应该验证用户输入以确保输入的日期是您期望的格式,或者不允许用户以自由格式输入日期(更倾向于使用日历选择器)。即使这样,也可以强制datepicker代码给你一个你期望的格式的字符串:

var picker = $('#datepicker');

picker.datepicker({ dateFormat: 'dd-mm-yy' });

picker.val( '1-1-1' );  // simulate user input

alert( picker.val() );  // "1-1-1"

var d = picker.datepicker( 'getDate' );
var f = picker.datepicker( 'option', 'dateFormat' );
var v = $.datepicker.formatDate( f, d );

alert( v );             // "01-01-2001"

但是请注意,虽然datepicker的getDate()方法将返回日期,但对于不完全匹配日期格式的用户输入,它只能做这么多。这意味着在没有验证的情况下,有可能得到与用户预期不同的日期。购者自慎。

这里有一个特定的代码:

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

更多信息可在这里:

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