我使用的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格式返回?
当前回答
datepicker的getDate方法返回一个日期类型，而不是字符串。
您需要使用日期格式将返回值格式化为字符串。 使用datepicker的formatDate函数:
var dateTypeVar = $('#datepicker').datepicker('getDate');
$.datepicker.formatDate('dd-mm-yy', dateTypeVar);
格式说明符的完整列表可以在这里找到。
其他回答
我认为正确的做法是这样的:
var picker = $('.date-picker');
var date = $.datepicker.formatDate(
picker.datepicker('option', 'dateFormat'),
picker.datepicker('getDate'));
这样可以确保格式字符串只定义一次，并且使用相同的格式化程序将格式字符串转换为格式化的日期。
这里是日期格式(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"/>
下面的代码可能有助于检查表单是否有多个日期字段:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Display month & 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>
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
这里是一个开箱即用的未来证明日期片段。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' );
}
});
