我使用的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格式返回?
当前回答
这里是一个开箱即用的未来证明日期片段。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' );
}
});
其他回答
所以我纠结于此，认为我疯了，事情是bootstrap datepicker被实现而不是jQuery，所以选项是不同的;
$('.dateInput').datepicker({ format: 'dd/mm/yyyy'})
这工作很顺利。试试这个。
将这些链接粘贴到头部部分。
<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>
这里是一个开箱即用的未来证明日期片段。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' );
}
});
这里有一个特定的代码:
var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
更多信息可在这里:
http://api.jqueryui.com/datepicker/#option-dateFormat http://api.jqueryui.com/datepicker/#utility-formatDate
你应该使用data-date-format="yyyy-mm-dd"在你的输入字段html和初始数据选择器在JQuery就像简单
$("#issue_date").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
});
