如何显示31-03年的结束日期(取决于起始日期)? [英] How do I display the end date 31-03- year(depending upon the start_date)?
问题描述
我有两个日期选择器.在第一个日期选择器中是开始日期,在第二个日期选择器中是结束日期.
I have a two date picker. In the first date picker is a start date and second date picker is an end date.
我的年份范围是
2018-2019 (Last date is 31-03-2019)
2019-2020 (My start date is 01-04-2019 and the end date is 31-03-2020)
2020-2021 (My start date is 01-04-2020 and the end date is 31-03-2021)
//and so on
现在根据当前年份,我们处于2018-2019年的范围内.
Now according to the current year, we are in the range of 2018-2019.
所以我的结束日期是31-03-2019.
So my end date will be the 31-03-2019.
如何显示31-03年的结束日期(取决于开始日期)?
How do I display the end date 31-03- year(depending upon the start_date)?
我需要一些jquery或PHP来处理吗?
Should I need some jquery or PHP to handle this?
$(function() {
var year = (new Date).getFullYear();
$(".start_date").datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
maxDate: new Date(year, 03, 31),
// maxDate: "+3m"
showAnim: "clip",
numberOfMonths: 1
});
$(".end_date").datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
maxDate: new Date(year, 03, 31),
showAnim: "clip"
//numberOfMonths: 2
});
});
<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>
您能帮我吗?
推荐答案
您可以使用onSelect
选项在.end_date
日期选择器中设置maxDate
.
You can, using onSelect
option, set the maxDate
in the .end_date
datepicker.
$(function() {
var year = (new Date).getFullYear();
$(".start_date").datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
maxDate: new Date(year, 03, 31),
// maxDate: "+3m"
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 + 1));
$(".end_date").datepicker("option", "maxDate", nextYear);
}
});
$(".end_date").datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
minDate: 0,
//maxDate : "+1Y",
maxDate: new Date(year, 03, 31),
showAnim: "clip"
//numberOfMonths: 2
});
});
<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>
由于我们以字符串形式获取日期,因此可以使用$.datepicker.parseDate()
将其解析为日期,并将年份递增为新的日期.
Since we get the date in string, we can use $.datepicker.parseDate()
to parse it into a Date and increment the year into a new Date.
希望有帮助.
这篇关于如何显示31-03年的结束日期(取决于起始日期)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!