jQuery UI DatePicker -更改日期格式

小开

最佳答案

这里有一个特定的代码:

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

更多信息可在这里:

小开

dateFormat

解析和显示日期的格式。这个属性是其中之一区域化属性。一份完整的可能名单
.格式请参见formatDate函数使用dateFormat选项初始化一个datepicker 指定。< / p >
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
在init之后获取或设置dateFormat选项。
//getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
//setter
$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

小开

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

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

这应该有用。

小开

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

小开

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

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

小开

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

小开

datepicker的getDate方法返回一个日期类型，而不是字符串。

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

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

格式说明符可在此下载的完整列表。

小开

我用这个:

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

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

小开

这里是日期格式(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)输入类型的文本，如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"/>

小开

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

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

这样可以确保格式字符串只定义一次，并且使用相同的格式化程序将格式字符串转换为格式化的日期。

小开

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

小开

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

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

小开

返回一个JavaScript日期。使用以下代码格式化此日期:

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

它使用了一个内置在datepicker中的实用函数:

< p > # EYZ1 - 将日期格式化为指定格式的字符串值

格式说明符可在此下载的完整列表。

小开

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

例如，当您将dateFormat设置为dd-mm-yy而用户输入1-1-1时。datepicker将在内部将其转换为Jan 01, 2001，但在datepicker对象上调用val()将返回字符串"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()方法将返回日期，但对于不完全匹配日期格式的用户输入，它只能做这么多。这意味着在没有验证的情况下，有可能得到与用户预期不同的日期。# EYZ1。

小开

只要运行这个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>

小开

我正在使用jquery的datepicker。这些jquery就用于此

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

小开

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

小开

如果你需要年月日格式的日期，你可以使用这个:-

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

您可以找到所有支持的格式 # EYZ0 < / p >

我在2015年12月6日需要，我这样做了:-

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

小开

这也是可行的:

$("#datepicker").datepicker({
dateFormat:'d-m-yy'
});

小开

你可以简单地在你的函数中使用这个格式就像

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


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

小开

尽量使用

$( ".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
}
});
});

小开

这里是一个开箱即用的未来证明日期片段。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' );
}
});

小开

我的选择如下:

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

小开

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

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

小开

你可以这样添加并尝试:

# EYZ0文件:

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

# EYZ0文件:

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

小开

这工作很顺利。试试这个。

将这些链接粘贴到头部部分。

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

小开

这对我来说很管用:

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

小开

所以我纠结于此，认为我疯了，事情是bootstrap datepicker被实现而不是jQuery，所以选项是不同的;

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

小开

如果你想要那种格式"dd-mm- yyquot;你必须改变Datepicker中的dateformat，这将工作…

$("#date").
({
dateFormar:'dd-mm-yy',
}).val();