我正在使用这个JQuery插件http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/在我的应用程序上有一个日历,但唯一的问题是它的格式是mm/dd/yyyy。我已经做了一些关于如何改变这一点的研究,但到目前为止运气不太好。
我希望它的格式改为dd/mm/yyyy。我尝试添加一些JavaScript函数来更改它,但到目前为止还没有成功。
这是我日历的HTML代码:
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="date">Date Input:</label>
<br>
<input type="date" name="date" id="date" style="width: 50%;" />
</div>
</form>
这是我一直试图更改格式的JavaScript,但我运气不佳:
var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();
到目前为止,这只是将输入框中的占位符更改为dd/mm/yyyy,当在日历上选择新日期时,它不会更改。
如果有任何帮助,我将不胜感激。
解决方案
工作示例:http://jsfiddle.net/Gajotres/PMrDn/65/
更改的javascript:
/*
* jQuery Mobile Framework : temporary extension to port jQuery UI's datepicker for mobile
* Copyright (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
(function($, undefined ) {
//cache previous datepicker ui method
var prevDp = $.fn.datepicker;
//rewrite datepicker
$.fn.datepicker = function( options ){
var dp = this;
//call cached datepicker plugin
prevDp.call( this, options );
//extend with some dom manipulation to update the markup for jQM
//call immediately
function updateDatepicker(){
$( ".ui-datepicker-header", dp ).addClass("ui-body-c ui-corner-top").removeClass("ui-corner-all");
$( ".ui-datepicker-prev, .ui-datepicker-next", dp ).attr("href", "#");
$( ".ui-datepicker-prev", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-l", shadow: true, corners: true});
$( ".ui-datepicker-next", dp ).buttonMarkup({iconpos: "notext", icon: "arrow-r", shadow: true, corners: true});
$( ".ui-datepicker-calendar th", dp ).addClass("ui-bar-c");
$( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c");
$( ".ui-datepicker-calendar a", dp ).buttonMarkup({corners: false, shadow: false});
$( ".ui-datepicker-calendar a.ui-state-active", dp ).addClass("ui-btn-active"); // selected date
$( ".ui-datepicker-calendar a.ui-state-highlight", dp ).addClass("ui-btn-up-e"); // today"s date
$( ".ui-datepicker-calendar .ui-btn", dp ).each(function(){
var el = $(this);
// remove extra button markup - necessary for date value to be interpreted correctly
el.html( el.find( ".ui-btn-text" ).text() );
});
};
//update now
updateDatepicker();
// and on click
$( dp ).click( updateDatepicker );
//return jqm obj
return this;
};
//bind to pagecreate to automatically enhance date inputs
$(document).on( "pagecreate", ".ui-page",function(){
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true, dateFormat: 'dd-mm-yy' }) );
});
});
})( jQuery );
实施
首先不包括此文件:
<script src="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js"></script>
使用这个答案附带的javascript,基本上它和顶部链接javascript相同,只是修改为使用新版本的jQuery加上您的日期格式。如果你想要另一种日期格式,只需在以下行手动更改即可:
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true, dateFormat: 'dd-mm-yy' }) );
这是解决方案。
var date = $('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();
您也可以查看以下链接:
http://docs.jquery.com/UI/Datepicker#option-日期格式
http://docs.jquery.com/UI/Datepicker/formatDate