カスタムの START および END 日付セレクターを作成しようとしていますが、残念ながら設計のために jquery UI の Datepicker を使用できないため、日付を 3<select>秒で分割するという昔ながらのやり方に固執しています。
この機能を使い続けるために、少なくとも複雑な部分があります:
- 月ごとに日を意味のあるものにします (2 月 31 日を選択可能にしたくない、..)
- 次に START から END セレクターまでを設定します
したがって、少なくともその部分を抽象化できるように、日付の計算を JavaScript の Date() オブジェクトに委譲する方がよいと考えました。
私はほとんどそこにいます、
しかし、Date() オブジェクトが正しい日付を伝える方法はいくつかありますが、両方のセレクターは前の日の各セットを表示します (たとえば、上位 28 日間は 2 月ではなく 3 月に発生します)
$(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);
});
})
そして、ここでそれをいじることができます：
ここで何が欠けているのか分かりますか?