ネイティブ js は date linkage_javascript スキルを実装します

月の判定には判定条件が多すぎるため、if else を使用するとパフォーマンスが大幅に低下します。

の使用をお勧めします。

コードは次のとおりです:

コードをコピーします コードは次のとおりです:

getDays:function(年,月){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 2 月の日データ処理
var FedDays = year%4==0?29:28,
returnDays = '';
var month = month スイッチ(月){
ケース '01':
ケース '03':
ケース '05':
ケース '07':
ケース '08':
ケース '10':
ケース '12': returnDays = 31;break;
ケース '04':
ケース '06':
ケース '09':
ケース '11': returnDays = 30;break;
ケース '02': returnDays = FedDays;break;
}
return returnDays;
}

完全なソースコード:

コードをコピー コードは次のとおりです:

/* 著者:laoguoyong
----------------------------------
日付3段階連動・範囲選択
----------------------------------
パラメータ
* [文字列] ターゲット:'#year,#month,#day' 年、月、日の ID
* [文字列] 範囲:'2013-02-03,2019-09-21'; 範囲、正しい形式は xxxx-xx-xx
----コードを保存するには、正しい日付範囲パラメータ
を渡してください。 ----エラーのデモ:
(1) 範囲:'2013-02-03,2019-9-21' は正しくありません。日付形式に注意してください
(2) range:'2013-02-03' が正しくありません。完全な範囲の値を入力してください
(3) 範囲:'2013-02-03,2016-02-30' は間違っています。2 月には 30 日がありません
(3) range:'2013-02-03,2011-02-30' は正しくありません。範囲が間違っています
*
*/
関数 GySetDate(opt){
//要素
var target = opt.targets.split(',');
This.e Year = this.getId(targets[0].slice(1));
This.eMonth = this.getId(targets[1].slice(1));
This.eDay = this.getId(targets[2].slice(1));
If(!this.e Year||!this.eMonth||!this.eDay) return;
//範囲値
var r = opt.range.indexOf(','),
aStarts = opt.range.slice(0,r).split('-'), // 変換先: ['2013','05','20']
aEnds = opt.range.slice(r 1,opt.range.length).split('-'); // に変換します: ['2018','08','20']
//数値型
This.start Year = parseInt(aStarts[0],10);
This.startMonth = parseInt(aStarts[1],10);
This.startDay = parseInt(aStarts[2],10);
This.end Year = parseInt(aEnds[0],10);
This.endMonth = parseInt(aEnds[1],10);
This.endDay = parseInt(aEnds[2],10);

this.init();
}
GySetDate.prototype = {
    init:function(){
        var _that = this;
        // 初始化日期
        this.setyears({'start':this.start Year,'end':this.end Year});
        this.setMonths({'start':this.startMonth});
        this.setDays({'year':this.start Year,'month':this.startMonth,'start':this.startDay});
        // 年选择
        this.eyear.onchange = function(){
            var year = parseInt(this.value);
            スイッチ(true){
                case (年 == _that.start Year):{
                    _that.setMonths({'start':_that.startMonth});
                    _that.setDays({'年':_that.start Year,'month':_that.startMonth,'start':_that.startDay});
                };ブレイク;
                case (年 == _that.end Year):{
                    _that.setMonths({'start':1,'end':_that.endMonth});
                    if(_that.endMonth>1){
                        _that.setDays({'年':_that.end Year,'月':1,'開始':1});   
                    }その他{
                        _that.setDays({'year':_that.end Year,'month':1,'start':1,'end':_that.endDay});
                    }
                };ブレイク;
                デフォルト:{
                    _that.setMonths({'start':1});
                    _that.setDays({'start':1,'year':year,'month':1});
                }
            }
           
        }
        // 月选择
        this.eMonth.onchange = function(){
            var year = parseInt(_that.e Year.options[_that.e Year.selectedIndex].value),
                month = parseInt(this.value);
            スイッチ(true){
                case (年==_その.終了年&&月==_その.終了月):{
                    _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay});
                };ブレイク;
                case (year==_that.start Year&&month==_that.startMonth):{
                    _that.setDays({'年':_that.start Year,'month':_that.startMonth,'start':_that.startDay});
                };ブレイク;
デフォルト：{
_that.setDays({'start':1,'year':year,'month':month});
}
                                                                                                                                             }
}、
/*年、月、日を設定します
---------------------------------
パラメータ値はすべて Number
型です。 */
// パラメータ {'start':xx,'end':xxx}
setyears:function(opt){
This.e Year.innerHTML = '';
for(var n=opt.start;n<=opt.end;n ){
This.e Year.add(new Option(n,n));
}
}、
// パラメータ {'start':xx,'end':xxx}
//パラメータ 'end' はオプションです。無視した場合は 12 月から始まります
setMonths:function(opt){
This.eMonth.innerHTML = '';
var 月 = opt.end ||
for(var n=opt.start;n<=months;n ){
If(n This.eMonth.add(new Option(n,n));
}
}、
// パラメータ {'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx}
//パラメータ「end」はオプションです。無視した場合は、今月末まで開始されます（月に基づいて判断されます）
setDays:function(opt){
This.eDay.innerHTML = '';
var days = opt.end || this.getDays(opt.year,opt.month);
for(var n=opt.start;n<=days;n ){
If(n This.eDay.add(new Option(n,n));
}
}、
/* 年と月に基づいて、2016-2 などの正しい日数を返します。戻り値は 29 日 (実行年)
-------------------------------------------------- ------------
パラメータ値はすべて Number
型です。 */
GetDays:function(年,月){
// var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31];
// 2 月の日データ処理
var FedDays = year%4==0?29:28,
returnDays = '';
var month = month スイッチ(月){
ケース '01':
ケース '03':
ケース '05':
ケース '07':
ケース '08':
ケース '10':
ケース '12': returnDays = 31;break;
ケース '04':
ケース '06':
ケース '09':
ケース '11': returnDays = 30;break;
ケース '02': returnDays = FedDays;break;
}
return returnDays;
}、
/*ツール補助関数
---------------------------------
*/
GetId:function(id){
return document.getElementById(id);
}
}

エフェクト表示:

その効果は悪くありません、皆さん、それを美化して自分のプロジェクトに使用することができます。