jQuery UI DatePicker - 更改日期格式

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？

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

getDatedatepicker 的方法返回日期类型,而不是字符串.

您需要使用日期格式将返回的值格式化为字符串.使用datepicker的formatDate功能:

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

此处提供了完整的格式说明符列表.

Answer 4

这里是日期选择器的完整代码,日期格式(yy/mm/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>

复制下面的代码并在body标签之间粘贴:

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

如果您想要两(2)个输入类型文本Start Date,End 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"/>

Answer 5

getDate函数返回JavaScript日期.使用以下代码格式化此日期:

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

它使用内置于datepicker中的实用程序函数:

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

此处提供了完整的格式说明符列表.

Answer 6

日期格式

解析和显示日期的格式.此属性是区域化属性之一.有关可能格式的完整列表,请参阅formatDate函数.

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

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

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

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

Answer 7

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

Answer 8

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

Answer 9

尝试使用

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

并且有很多选项可供日期选择器你可以在这里找到它

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() {  
        $( "#datepicker" ).datepicker({
            dateFormat: 'dd/mm/yy',
          changeMonth: true,
          changeYear: true
        });
      });

<input type="text" id="datepicker"></p>

Answer 11

您可以添加并尝试以下方式：

HTML文件：

<p><input type="text" id="demoDatepicker" /></p>

JavaScript文件：

$(function() {  
    $("#demoDatepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true,
        constrainInput: false
    });
});

Answer 12

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

Answer 13

如果您需要yy-mm-dd格式的日期，则可以使用以下命令：

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

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

我需要2015年12月6日，我这样做是：-

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

Answer 14

所以我为此苦苦挣扎，觉得我快要疯了，问题是 bootstrap datepicker 正在实现，而不是 jQuery，所以选项是不同的；

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})