weui.datePicker控件开始结束日期联动效果

 功能
1,获取焦点弹日期框
2,当前控件无值,默认显示今天
3,当前控件有值,则显示控件的值
4,选择开始日期之后清空结束日期,js判读日期大小再清空太麻烦,先不搞,后续再说
5,结束日期显示时候,日期最小值根据开始日期来判断,开始日期为空,默认2000年,开始日期有值则最小值默认开始日期的值


效果图

weui.datePicker控件开始结束日期联动效果_第1张图片

weui.datePicker控件开始结束日期联动效果_第2张图片



使用代码

//开始日期
                    $('#txt_dateStart').on('focus', function () {
                        var dt = new Date();
                        var df= [dt.getFullYear(), (dt.getMonth() + 1), dt.getDate()];
                        var id=dt.getFullYear()+""+dt.getMonth() +""+dt.getDate()+""+dt.getHours()+""+ dt.getMinutes()+""+dt.getSeconds();
                      
                        var value=$.trim($("#txt_dateStart").val());
                        if(value!="")
                        {
                            var arrays = value.split("-");
                            df= [parseInt(arrays[0]), parseInt(arrays[1]), parseInt(arrays[2])];
                        }
                       
                        weui.datePicker({
                            id: "start"+id,
                            start: 2000,
                            end: dt.getFullYear()+20,
                            defaultValue:df,
                            onConfirm: function (result) {
                                $("#txt_dateStart").val(result[0].label.replace("年","-") + result[1].label.replace("月","-") + result[2].label.replace("日",""));
                                $("#txt_dateEnd").val("");
                            }
                        });
                    });

                    //结束日期
                    $('#txt_dateEnd').on('focus', function () {
var dt = new Date();
                        var df = [dt.getFullYear(), (dt.getMonth() + 1), dt.getDate()];
                        var id = dt.getFullYear() + "" + dt.getMonth() + "" + dt.getDate() + "" + dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();
                       
                        var value = $.trim($("#txt_dateEnd").val());
                        if (value != "") {
                            var arrays = value.split("-");
                            df = [parseInt(arrays[0]), parseInt(arrays[1]), parseInt(arrays[2])];
                        }
                        var dfStart = "2000";
                        var startVal = $.trim($("#txt_dateStart").val());
                        if (startVal != "") {
                            dfStart = startVal;
                        }
                        var dts = dfStart.split('-');
                        var std;
                        if(dts.length==1)
                        {
                           std=new Date(dts[0],1,1);
                        }else{
                            std=new Date(dts[0],dts[1],dts[2]);
                        }
                        
                        weui.datePicker({
                            id: "end" + id,
                            start: std,
                            end: dt.getFullYear() + 2,
                            defaultValue: df,
                            onConfirm: function (result) {
                                $("#txt_dateEnd").val(result[0].label.replace("年", "-") + result[1].label.replace("月", "-") + result[2].label.replace("日", ""));
                            }
                        });
                    });




你可能感兴趣的:(weui.datePicker控件开始结束日期联动效果)