jQuery UI DatePicker-更改日期格式


546

我正在使用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


2
完美,谢谢,为什么不$ .datepicker.formatDate(“ yy-mm-dd”,new Date(2007,1-1,26)); 像文档一样工作?
Hein du Plessis)

Answers:


961

这是针对您的代码的一种:

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

此处提供更多常规信息:


6
这只是给我与datepicker中指定的格式相同的格式,而不是dd-mm-yy。使用版本1.10。下面的answear工作正常。
汤米

4
yy给了我2015。我怎样才能得到15
SearchForKnowledge

6
@SearchForKnowledge仅使用y
datepicker

11
注意,如果你之前已经定义了不同的格式,这是不行的,你应该做的,然后$("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy" ).val()
若昂·皮门特尔·费雷拉

4
在旧版本中format: 'dd-mm-yyyy',应该可以工作
TarangP

99

在jQuery脚本代码中,只需粘贴代码即可。

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

这应该工作。


9
.selector#datepicker不一样。逐字粘贴您的代码将不起作用。
戴夫·贾维斯

63

getDate日期选择器的方法返回一个日期类型,而不是一个字符串。

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

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

格式说明符的完整列表在此处


34

此处为日期选择器的完整代码,其日期格式为(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 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"/>

19

日期格式

解析和显示日期的格式。此属性是区域化属性之一。有关可能格式的完整列表,请参见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' );

此示例中的第一行代码使“日期选择器”使用特定的日期格式,而不是默认的美国mm / dd / yy格式。
瑞安

3
@Ryan对我不起作用,您是否有一个包含所有代码行的示例?
knocte 2014年

19

getDate函数返回JavaScript日期。使用以下代码设置日期格式:

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

它使用内置在datepicker中的实用程序功能:

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

格式说明符的完整列表在此处


2
如果您丰富@kcsoft答案(就像我要去做)而不是发布一个新的答案,那会更好;)
蓝蓝的时间

10

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

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

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 
             }
      });
});

6

您可以像在函数中那样简单地使用这种格式

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

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

5

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

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

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

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

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

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

4

只需运行此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>



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

3

这样可以顺利进行。尝试这个。

将这些链接粘贴到您的头部。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

以下是JS编码。

 <script>

        $(document).ready(function () {
            $('#completionDate').datepicker({
                dateFormat: 'yy-mm-dd', // enter date format you prefer (e.g. 2018-10-09)
                changeMonth: true,
                changeYear: true,
                yearRange: "-50:+10",
                clickInput: true,

                onSelect: function (date) {
                    loadMusterChit();
                }

            });
        });

    </script>

2

如果在input[type="text"]元素上设置日期选择器,则可能不会获得一致格式的日期,尤其是当用户不遵循日期格式输入数据时。

例如,当您将dateFormat设置为dd-mm-yy且用户类型为时1-1-1。datepicker会将其Jan 01, 2001内部转换为日期,但是调用val()datepicker对象将返回字符串"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()方法将返回日期,但它只能对与日期格式不完全匹配的用户输入执行很多操作。这意味着在没有验证的情况下,有可能获得与用户期望的日期不同的日期。请注意


2

我正在为日期选择器使用jquery。这些jqueries用于

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

2

我的选择如下:

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>


1

最终得到datepicker日期更改方法的答案:

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

1

我用这个:

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

返回的日期格式如“ 20120118Jan 18, 2012


1

以下代码可能有助于检查表单是否包含多个日期字段:

<!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>

2
这如何回答有关日期格式的原始问题?
ryadavilli

0

我认为正确的方法是这样的:

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

这样,您可以确保仅定义一次格式字符串,并使用同一格式程序将格式字符串转换为格式化日期。


0

这是开箱即用的将来证明日期摘录。Firefox默认为jquery ui datepicker。否则,将使用HTML5 datepicker。如果FF支持HTML5 type =“ date”,则该脚本将只是多余的。不要忘记head标签需要三个依赖项。

<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' );     
  }
});

0

您应该data-date-format="yyyy-mm-dd"在输入字段中使用html和JQuery中的初始数据选择器,就像简单一样

$("#issue_date").datepicker({ 
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true
});

0

您可以添加并尝试这种方式:

HTML档案:

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

JavaScript文件:

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

0

这对我有用:

$.fn.datepicker.defaults.format = 'yy-mm-dd'

0

所以我为此苦苦挣扎,以为我发疯了,问题是引导datepicker的实现不是jQuery,所以选项有所不同。

$('.dateInput').datepicker({  format: 'dd/mm/yyyy'})
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.