如何用截止日期显示结束日期 31-03
Posted
技术标签:
【中文标题】如何用截止日期显示结束日期 31-03【英文标题】:how to display the end date with the cut off date 31-03 【发布时间】:2019-06-24 14:47:47 【问题描述】:我有两个日期选择器。第一个日期选择器是开始日期,第二个日期选择器是结束日期。
所以我正在做的是,我的结束日期范围是31-03-year(depending upon the start date)
。
我选择开始日期31-01-2019
,所以用户可以选择结束日期直到31-03-2019
。这种情况对我有用(检查 sn-p)。
现在我的问题是,如果用户选择开始日期01-04-2019
,那么结束日期用户可以选择直到31-03-2020
。
所以我的截止日期是 31-03。
我知道我必须使用类似下面的代码,但我很困惑如何使用它。我应该使用 If 条件吗?
var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy + 1));
你能帮我解决这个问题吗?
$(function()
var year = (new Date).getFullYear();
$(".start_date").datepicker(
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+0Y",
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
showAnim: "clip",
//numberOfMonths: 1,
onSelect: function(dt, dp)
var selected = $.datepicker.parseDate("dd-mm-yy", dt);
var yy = selected.getFullYear();
var mm = selected.getMonth();
var dd = selected.getDate();
var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));
//alert(nextYear);
$(".end_date").datepicker("option", "maxDate", nextYear);
);
$(".end_date").datepicker(
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
//maxDate: new Date(year, 03, 31),
showAnim: "clip"
);
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<label>Start Date</label>
<input type="text" name="start_date" placeholder="Start Date" id="start_date" class="start_date form-control">
</div>
<div class="form-group">
<label>End Date</label>
<input type="text" name="end_date" id="end_date" placeholder="End Date" class="end_date form-control">
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
【问题讨论】:
How do I display the end date 31-03- year(depending upon the start_date)?的可能重复 【参考方案1】:由于开始日期仅限于当年,而目标日期是当月的最后一天,因此除了开始日期的月份之外,您没有检查任何其他内容。
onSelect: function(dt, dp)
var selected = $.datepicker.parseDate("dd-mm-yy", dt);
var yy = selected.getFullYear();
var mm = selected.getMonth();
var dd = selected.getDate();
if(mm > 2) //date is later than march
yy++;
var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));
$(".end_date").datepicker("option", "maxDate", nextYear);
【讨论】:
给我一些时间来检查这个答案 这种方法可行,但是...输入将是午夜 UTC 日期对象。如果您使用非 UTC 方法操作它,您将获得weird timezone effects。 getDate() 将为伦敦西部的用户返回前一天。【参考方案2】:此功能将在输入日期后的下一个 3 月 31 日找到您。之后它应该很简单。
var myDate = new Date("2018-04-01")
myDate.setUTCMonth(Math.floor((myDate.getUTCMonth() + 10)/12)*12 + 2)
myDate.setUTCDate(31)
myDate.setUTCHours(0)
myDate.setUTCMinutes(0)
myDate.setUTCSeconds(0)
console.log(myDate)
它正在工作......
$(function()
var year = (new Date).getFullYear();
$(".start_date").datepicker(
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+0Y",
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
showAnim: "clip",
//numberOfMonths: 1,
onSelect: function(dt, dp)
var myDate = $.datepicker.parseDate("dd-mm-yy", dt);
myDate.setUTCMonth(Math.floor((myDate.getUTCMonth() + 10)/12)*12 + 2)
myDate.setUTCDate(31)
myDate.setUTCHours(0)
myDate.setUTCMinutes(0)
myDate.setUTCSeconds(0)
console.log(myDate)
$(".end_date").datepicker("option", "maxDate", myDate);
);
$(".end_date").datepicker(
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
//maxDate: new Date(year, 03, 31),
showAnim: "clip"
);
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<label>Start Date</label>
<input type="text" name="start_date" placeholder="Start Date" id="start_date" class="start_date form-control">
</div>
<div class="form-group">
<label>End Date</label>
<input type="text" name="end_date" id="end_date" placeholder="End Date" class="end_date form-control">
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
【讨论】:
给我一些时间来检查这个答案 答案已更新。彻底检查这一点,但它似乎正在工作。您应该采取措施将结束日期限制为 开始日期之后的日期? 让我检查一下。给我一些时间再检查一下【参考方案3】:var year = (new Date).getFullYear();
$(".start_date").datepicker(
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+0Y",
yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
showAnim: "clip",
//numberOfMonths: 1,
onSelect: function (dt, dp)
var selected = $.datepicker.parseDate("dd-mm-yy", dt);
var yy = selected.getFullYear();
var mm = selected.getMonth();
var dd = selected.getDate();
if(mm > 2)
yy++;
else
yy;
var nextYear = $.datepicker.parseDate("dd-mm-yy", "31-03-" + (yy));
$(".end_date").datepicker("option", "maxDate", nextYear);
);
$(".end_date").datepicker(
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
showAnim: "clip",
);
【讨论】:
【参考方案4】:我就是这样做的
$(function()
let today = new Date(Date.UTC());
let currentYear = today.getUTCFullYear();
$(".start_date").datepicker(
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
yearRange: currentYear+':'+currentYear,
minDate: 0,
showAnim: "clip",
onSelect: function(date)
let selectedDate = new Date(date.split('-').reverse().join('-'));
let selectedYear = selectedDate.getUTCFullYear();
let cutoffDate = new Date(Date.UTC(selectedYear, 2, 31));
let maxDate = selectedDate > cutoffDate ?
new Date(Date.UTC(selectedYear+1, 2, 31)) :
new Date(Date.UTC(selectedYear, 2, 31));
$('.end_date').datepicker('option', 'minDate', date);
$('.end_date').datepicker('option', 'maxDate', '31-03-'+maxDate.getUTCFullYear());
$('.end_date').datepicker('option', 'yearRange', currentYear+':'+maxDate.getUTCFullYear());
);
$(".end_date").datepicker(
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
yearRange: currentYear+':'+currentYear,
minDate: 0,
showAnim: "clip"
);
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<label>Start Date</label>
<input type="text" name="start_date" placeholder="Start Date" id="start_date" class="start_date form-control">
</div>
<div class="form-group">
<label>End Date</label>
<input type="text" name="end_date" id="end_date" placeholder="End Date" class="end_date form-control">
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
【讨论】:
感谢您的回答,但在开始日期显示所有年份。我只需要当前年份。另外,我在开始日期和结束日期中选择日期 01-04-2019,它仍然显示 2019。应该是 2020 年 3 月 这个答案得到了两个赞。但为什么?这不是预期的输出。 这一切都很好,但你会遇到奇怪的时区问题。如果您在 Windows 上,请右键单击右下角的时钟。将时区设置为任何负数,例如在美国的任何地方,然后执行new Date('2018-01-01').getFullYear()
。 你看到你的期望了吗?为了安全地操作日期,你需要确保排除时区,只使用 UTC 方法。
几乎!...第 14 行的new Date()
对时区敏感。它会为您提供一个日期加上一个时间,并且对于different timezones 中的用户而言,它的行为会有所不同。把你的机器放在东部时区,澳大利亚,印度,欧洲,然后试试new Date(2018,0,1).getUTCFullYear()
。你看到你的期望了吗?
new Date(2018,0,1)
为您提供当地时间午夜。 new Date('2018-01-01')
让你在伦敦的午夜。现在很困惑?以上是关于如何用截止日期显示结束日期 31-03的主要内容,如果未能解决你的问题,请参考以下文章