我有一个包含3个选项的下拉框...每月,每季度和每年。当选择任一选项时,我试图填充2个字段。开始日期将是当前日期,我想根据所选的选项计算结束日期。到目前为止,我有这个。
HTML:
<select name="date_range" class="date_range">
<option value="None">Please select a date range</option>
<option value="Yearly">Yearly</option>
<option value="Quarterly">Quarterly</option>
<option value="Monthly">Monthly</option>
</select>
<p>Start Date</p>
<input type="text" name="start_date" id="start_date" />
<p>End Date</p>
<input type="text" name="end_date" id="end_date" />
JavaScript的:
$(function() {
$('.date_range').change(function(){
var date = new Date();
console.log(date);
});
});
console.log给了我以下内容:
Wed May 01 2013 19:42:42 GMT+0100 (GMT Daylight Time)
'start_date'和end_date'字段都使用datepicker,目前格式为dd-mm-yyyy。如何计算从当前日期到正确格式的正确日期范围(月,季度或年度)并设置两个字段的值(使用'dd-mm-yyyy'格式)。
我遇到了Moment.js和datejs,如果问题太复杂,我可以使用它。提前为任何帮助干杯。
答案 0 :(得分:6)
这利用了日期对象上的函数setFullYear()
。
注意:我同意将值更改为您想要将其更改为的月数是最佳解决方案,因为它允许更多动态代码。此外,我的代码不处理无选择,因为我不知道你想要它做什么。
<强> HTML:强>
<select name="date_range" class="date_range">
<option value="None">Please select a date range</option>
<option value="Yearly">Yearly</option>
<option value="Quarterly">Quarterly</option>
<option value="Monthly">Monthly</option>
</select>
<p>Start Date</p>
<input type="text" name="start_date" id="start_date" />
<p>End Date</p>
<input type="text" name="end_date" id="end_date" />
<强> JS:强>
$('.date_range').change(function(){
var now = new Date();
var start = new Date();
switch($('.date_range').find(":selected").text())
{
case 'Yearly':
start.setFullYear(start.getFullYear()-1);
break;
case 'Quarterly':
start.setFullYear(start.getFullYear(), start.getMonth()-3);
break;
case 'Monthly':
start.setFullYear(start.getFullYear(), start.getMonth()-1);
break;
}
$('#start_date').val(start.toLocaleDateString());
$('#end_date').val(now.toLocaleDateString());
});
<强> HTML:强>
<select name="date_range" class="date_range">
<option value="0">Please select a date range</option>
<option value="12">Yearly</option>
<option value="3">Quarterly</option>
<option value="1">Monthly</option>
</select>
<p>Start Date</p>
<input type="text" name="start_date" id="start_date" />
<p>End Date</p>
<input type="text" name="end_date" id="end_date" />
<强> JS:强>
$('.date_range').change(function(){
var now = new Date();
var start = new Date();
start.setFullYear(start.getFullYear(), start.getMonth()-$('.date_range').find(":selected").val());
$('#start_date').val(start.toLocaleDateString());
$('#end_date').val(now.toLocaleDateString());
});
答案 1 :(得分:2)
您是否尝试过getFullYear()
?
var d = new Date(2013, 5, 1);
d.setFullYear(d.getFullYear() - 1);
答案 2 :(得分:1)
我建议使用几个月而不是字符串对HTML进行细微更改:
<select name="date_range" class="date_range">
<option value="0">Please select a date range</option>
<option value="12">Yearly</option>
<option value="3">Quarterly</option>
<option value="1">Monthly</option>
</select>
<p>Start Date</p>
<input type="date" name="start_date" id="start_date" />
<p>End Date</p>
<input type="date" name="end_date" id="end_date" />
现在你的代码相对简单了。 Example fiddle。需要支持<input type="date">
的相对现代的浏览器(如果日期输入为yyyy-mm-dd
,则在较旧的浏览器上将有效)
$('#start_date').change(function() {
var end_date_value = new Date($('#start_date').val()); // Start with start_date value
end_date_value.setMonth(end_date_value.getMonth() + $('select.date_range option:selected').val()); // Add range months
$('#end_date').val(end_date_value.toISOString().substring(0, 10));
});
$('#end_date').change(function() {
var start_date_value = new Date($('#end_date').val()); // Start with end_date value
start_date_value.setMonth(start_date_value.getMonth() - $('select.date_range option:selected').val()); // Substract range months
$('#start_date').val(start_date_value.toISOString().substring(0, 10));
});
答案 3 :(得分:1)
对于日期格式,请使用jquery.datepicker对象中的内置“format”方法: $(“#start_date”)。datepicker.formatDate(“dd-mm-yyyy”,new Date())