jQuery UI DatePicker – 更改date格式

我使用jQuery UI中的UI DatePicker作为独立的select器。 我有这个代码：

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

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

Answer 2

里面的jQuery脚本代码只是粘贴代码。

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

这应该工作。

Answer 3

getDate方法返回一个datetypes，而不是一个string。

您需要使用date格式将返回的值格式化为string。 使用datepicker的formatDate函数：

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

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

Answer 4

这里为dateselect器的date格式（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）inputtypes的文本，如“ Start Date和“ End Date则使用此脚本并更改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> 

两个input文本，如：

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

Answer 5

date格式

parsing和显示date的格式。 该属性是区域化属性之一。 有关可能格式的完整列表，请参阅formatDate函数。

代码示例使用指定的dateFormat选项初始化dateselect器。

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

在init之后获取或设置dateFormat选项。

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

Answer 6

getDate函数返回一个JavaScriptdate。 使用以下代码格式化此date：

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

它使用内置于datepicker中的效用函数：

$.datepicker.formatDate( format, date, settings ) – 将date格式化为具有指定格式的string值。

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

Answer 7

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

Answer 8

$("#datepicker").datepicker("getDate")返回一个date对象，而不是一个string。

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

Answer 9

尝试使用

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

并有很多选项可用datepicker，你可以在这里find它

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

这是我们用参数调用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 } }); }); 

Answer 10

你可以简单地使用这种格式在你的function就像

  $(function() { $( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true }); }); <input type="text" id="datepicker"></p> 

Answer 11

这也起作用：

 $("#datepicker").datepicker({ dateFormat:'dm-yy' }); 

Answer 12

如果你需要yy-mm-dd格式的date，你可以使用这个： –

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

你可以find所有支持的格式https://jqueryui.com/datepicker/#date-formats

我需要2015年12月6日，我做到了这一点： –

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

Answer 13

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

Answer 14

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

Answer 15

只要运行这个HTML页面，你可以看到几种格式。

 <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Format date</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#datepicker" ).datepicker(); $( "#format" ).change(function() { $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); }); }); </script> </head> <body> <p>Date: <input type="text" id="datepicker" size="30" /></p> <p>Format options:<br /> <select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, y</option> <option value="d MM, y">Medium - d MM, y</option> <option value="DD, d MM, yy">Full - DD, d MM, yy</option> <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> </select> </p> </body> </html> 

Answer 16

我正在使用jQuery的datepicker.These 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> 

Answer 17

最后得到datepickerdate更改方法的答案：

 $('#formatdate').change(function(){ $('#datpicker').datepicker("option","dateFormat","yy-mm-dd"); }); 

Answer 18

我使用这个：

 var strDate = $("#dateTo").datepicker('getDate').format('yyyyMMdd'); 

其中Jan 18, 2012返回“ 20120118 ”格式的date。

Answer 19

下面的代码可能有助于检查表单是否有多个date字段：

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Display month &amp; year menus</title> <link rel="stylesheet" href="jquery-ui.css" /> <script src="jquery-1.8.3.js"></script> <script src="jquery-ui.js"></script> <link rel="stylesheet" href="style.css" /> <script> function pickDate(DateObject){ // alert(DateObject.name) $(function() { $("#"+DateObject.name).datepicker({ dateFormat: "dd/mm/yy" }).val() }); } /* $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); */ </script> </head> <body> <p>From Date: <input type="text" name="FromDate" id="FromDate" size="9" onfocus="pickDate(this)"/></p> <p>To Date: <input type="text" name="ToDate" id="ToDate" size="9" onfocus="pickDate(this)" /></p> </body> </html> 

Answer 20

如果您在input[type="text"]元素上设置了dateselect器，则可能无法获得一致的格式化date，特别是当用户未按date格式input数据时。

例如，当您将dateFormat设置为dd-mm-yy并且用户键入1-1-1 。 datepicker会将其转换为Jan 01, 2001内部版本，但在datepicker对象上调用val()将返回string"1-1-1" – 正是文本字段中的内容。

这意味着您应该validation用户input以确保inputdate采用您期望的格式，或者不允许用户inputdate自由格式（而不是日历select器）。 即使如此， 也可以强制datepicker代码给你一个string，就像你所期望的那样：

 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()方法将返回一个date，但它只能做与用户input不完全匹配的date格式。 这意味着在没有validation的情况下，可以得到与用户期望的不同的date。 注意力不足

Answer 21

这是一个开箱即用的未来certificatedate片段。 Firefox默认为jquery ui datepicker。 否则使用HTML5dateselect器。 如果FF曾经支持HTML5 type =“date”，那么脚本将会是多余的。 不要忘记头标中需要三个依赖关系。

 <script> src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!--Form element uses HTML 5 type="date"--> <div class="form-group row"> <label for="date" class="col-sm-2 col-form-label"Date</label> <div class="col-sm-10"> <input type="date" class="form-control" name="date" id="date" placeholder="date"> </div> </div> <!--if the user is using FireFox it autoconverts type='date' into type='text'. If the type is text the script below will assign the jquery ui datepicker with options--> <script> $(function() { var elem = document.createElement('input'); elem.setAttribute('type', 'date'); if ( elem.type === 'text' ) { $('#date').datepicker(); $( "#date" ).datepicker( "option", "dateFormat", 'yy-mm-dd' ); } }); 

Answer 22

我认为正确的做法是这样的：

 var picker = $('.date-picker'); var date = $.datepicker.formatDate( picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate')); 

通过这种方式，您可以确保格式string仅定义一次，并使用相同的格式化程序将格式string转换为格式化的date。