我正在尝试构建一个自定义 START 和 END 日期选择器,但不幸的是,由于设计我将无法使用 jquery UI Datepicker,所以我坚持在 3<select>
秒内拆分日期的旧时尚
为了保持这个特性可用,我们发现这个 - 至少 - 复杂的部分:
- 让每个月的日子都有意义(不想选择 2 月 31 日,..)
- 将 next thay 从 START 设置为 END 选择器
所以我认为最好将日期计算委托给javascript Date() 对象,这样至少我可以抽象出那部分。
我快到了,
但是有些 Date() 对象如何告诉正确的日期,但是两个选择器都显示了前一天的每一天(例如,前 28 天发生在 3 月而不是 2 月)
$(function(){
months = ['jan','feb','mar','apr','may','jun','jul','ago','sep','oct','nov','dec'];
/* Cachear selects */
var $ld = $('select[name=llegada-dia]');
var $lm = $('select[name=llegada-mes]');
var $ly = $('select[name=llegada-ano]');
var $sd = $('select[name=salida-dia]');
var $sm = $('select[name=salida-mes]');
var $sy = $('select[name=salida-ano]');
var manyDays = function( month, year ){
var fecha = new Date(year, (month) , 0);
return fecha.getDate();
}
var paintCals = function( day, month , year ){
if(day == '') day = 1;
if(month == '') month = 0;
if(year == '' ) year = 2013;
//month = month -1;
var fecha = new Date( year, month , day );
var dia = fecha.getDate();
var mes = fecha.getMonth();
var anyo = fecha.getFullYear();
var dias_mes = manyDays( mes,anyo );
/* Generate next date = fecha + 1 */
var next_fecha = fecha;
next_fecha.setDate(next_fecha.getDate() + 1);
next_fecha.setMonth(fecha.getMonth() + (dia == dias_mes ? 1 : 0) );
next_fecha.setFullYear(fecha.getFullYear() + (mes == 12 ? 1 : 0) );
var next_dia = next_fecha.getDate();
var next_mes = next_fecha.getMonth();
var next_anyo = next_fecha.getFullYear();
var next_dias_mes = manyDays( next_mes, next_anyo ) ;
$ld.empty();
for(var tmpdia = 1; tmpdia <= dias_mes; tmpdia++){
var doption = $('<option>').attr( 'value',tmpdia )
.text( tmpdia );
if(dia == tmpdia && dia != ''){
doption.attr('selected', 'selected');
}
$ld.append(doption);
}
/* Actualizar dias salida */
$sd.empty();
for(var tmpdia = next_dia; tmpdia <= next_dias_mes; tmpdia++){
var doption = $('<option>').attr( 'value' , tmpdia )
.text(tmpdia);
if(next_dia == tmpdia && next_dia != ''){
doption.attr('selected', 'selected');
}
$sd.append(doption);
}
/* Actualizar meses salida */
$sm.empty();
for(var tmpmes = next_mes ; tmpmes < 12; tmpmes++){
var doption = $('<option>').attr('value',tmpmes)
.text(months[tmpmes]);
if(dia == tmpdia && dia != ''){
doption.attr('selected', 'selected');
}
$sm.append(doption);
}
/* Actualizar anyos salida */
$sy.empty();
for(var tmpanyo = next_anyo; tmpanyo <= 2020; tmpanyo++){
var doption = $('<option>').attr('value',tmpanyo)
.text(tmpanyo);
if(next_anyo == tmpanyo && next_anyo != ''){
doption.attr('selected', 'selected');
}
$sy.append(doption);
}
}
$('.arrival select').on('change',function(){
var ldia = $ld.val();
var lmes = $lm.val();
var lano = $ly.val();
var ldias = paintCals(ldia,lmes,lano);
});
})
在这里可以摆弄:
知道我在这里缺少什么吗?