jquery-ui - jquery Ui DatePicker - 更改日期格式

  显示原文与译文双语对照的内容

我正在使用来自 jQuery 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?

时间:

datepicker的getDate 方法返回日期类型,而不是字符串。

你需要使用日期格式将返回值格式化为字符串。 使用 formatDate 函数的:


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

格式说明符的完整列表可以在下面的列表中找到。

下面是日期格式为 (yy dd).的日期选择器的完整代码

复制链接并粘贴到head标记中:


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

如果你想要 two(2) 输入类型文本如 Start DateEnd Date,那么使用这里脚本并更改日期格式。


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

dateFormat

已经分析和显示日期的格式。 这里属性是regionalisation属性之一。 有关可能格式的完整列表,请参阅formatDate函数。

代码示例使用指定的dateFormat选项初始化一个 datepicker 。


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

在初始化后获取或者设置dateFormat选项。


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

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


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

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

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

格式说明符的完整列表可以在下面的列表中找到。

$("#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


<script>
 $(function() { 
 $("#datepicker").datepicker(); 
 $('#datepicker').datepicker('option', {dateFormat: 'd MM y'});
 }); 
 $("#startDate").datepicker({dateFormat: 'd MM y'}); 
</script>

在 datepicker.These jqueries中使用jquery是用于


<script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
<script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
<link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">

然后你跟着这段代码


<script>
 jQuery(function() {
 jQuery("#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
 });
</script>

...