zoukankan      html  css  js  c++  java
  • 日历范围 本月(限年)

    用日期插件时,经常会有一种需求。两个input框选择。开始时间小于结束时间,结束时间大于开始时间,开始时间和结束时间都不大于当前时间。

    然后当一个输入框日期变化(包括清除)的时候,changeDate事件触发,在其回调函数里修改另一个输入框的可选范围

        function DatePicker(beginSelector,endSelector){  
                  // 仅选择日期  
                  $(beginSelector).datepicker(  
                  {  
                    language:  "zh-CN",  
                    autoclose: true,  
                    startView: 0,  
                    format: "yyyy-mm-dd",  
                    clearBtn:true,  
                    todayBtn:false,  
                    endDate:new Date()  
                  }).on('changeDate', function(ev){               
                    if(ev.date){  
                        $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()))  
                    }else{  
                        $(endSelector).datepicker('setStartDate',null);  
                    }  
                  })  
          
                  $(endSelector).datepicker(  
                  {  
                    language:  "zh-CN",  
                    autoclose: true,  
                    startView:0,  
                    format: "yyyy-mm-dd",  
                    clearBtn:true,  
                    todayBtn:false,  
                    endDate:new Date()  
                  }).on('changeDate', function(ev){    
                    if(ev.date){  
                        $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))  
                    }else{  
                        $(beginSelector).datepicker('setEndDate',new Date());  
                    }   
          
                  })  
              }  
          
              DatePicker("#date_begin","#date_end");  

    Bootstrap DatePicker实现日期选择 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。

    演示地址:http://runningls.com/demos/2016/daily/datepicker/

    github:https://github.com/liusaint/JavaScript-record/tree/master/datepicker

    转载注明出处:http://blog.csdn.net/liusaint1992/article/details/52590681

    以上是我百度出来和自己项目需求差不说的

    但是我的项目需求可能更小一点  就是在开始时间里 选择的年 月  ,在结束时间里也是这个年份 和月份并且 不能够选择其他月份

    并且出现了一些问题,在我把写好的放入我们项目中发现 ,日历总是出现在左侧 ,不在文本况下  ,经过自己调啊,终于发现原来是某个css里少了个position:absolute

    1 .datepicker {
    2     background-color: #fff;
    3     border-radius: 4px;
    4     direction: ltr;
    5     position: absolute;//新添加的
    6 }
    //日期范围 控制开始
    //日历
    function DatePicker(beginSelector, endSelector) {
        // 开始时间
        $(beginSelector).datepicker(
        {
            language: "zh-CN",
            autoclose: true,
            startView: 0,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            todayHighlight: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            $(endSelector).datepicker('setDate', '');
            if (ev.date) {
                $(endSelector).datepicker('setStartDate', new Date(ev.date.valueOf()));
                $(endSelector).datepicker('setEndDate', AddDays($(beginSelector).datepicker('getDate'), issueDays($(beginSelector).datepicker('getDate'))));
            } else {
                $(endSelector).datepicker('setStartDate', null);
            }
    
        })
        //结束时间
        $(endSelector).datepicker(
        {
            language: "zh-CN",
            autoclose: true,
            startView: 0,
            format: "yyyy-mm-dd",
            clearBtn: true,
            todayBtn: false,
            pickerPosition: "bottom-right",
            todayHighlight: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            if (ev.date) {
                $(beginSelector).datepicker('setEndDate', new Date(ev.date.valueOf()))
            } else {
                $(beginSelector).datepicker('setEndDate', new Date());
            }
        })
    }
    
    
    
    //获取某月剩余天数
    function issueDays(now) {
        var today = now;
        var now = today.getDate();
        var year = today.getYear();
        if (year < 2000) year += 1900; // Y2K fix
        var month = today.getMonth();
        var monarr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
        if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monarr[1] = "29";
        return (monarr[month] - now);
    
    }
    
    //日期加上天数后的新日期.
    function AddDays(date, days) {
        var nd = new Date(date);
        nd = nd.valueOf();
        nd = nd + days * 24 * 60 * 60 * 1000;
        nd = new Date(nd);
        var y = nd.getFullYear();
        var m = nd.getMonth() + 1;
        var d = nd.getDate();
        if (m <= 9) m = "0" + m;
        if (d <= 9) d = "0" + d;
        var cdate = y + "-" + m + "-" + d;
        return cdate;
    }
    
    //select
    timeShi();
    function timeShi() {
        var arr = ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时',
        '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'];
        for (var i = 0; i < arr.length; i++) {
            if (i == 0) {
                var html = "<option value='" + arr[i] + "' selected='selected'>" + arr[i] + "</option>";
            }
            else {
                var html = "<option value='" + arr[i] + "'>" + arr[i] + "</option>";
    
            }
            $(".selectS").each(function () {
                $(this).append(html)
            })
        }
    }
    DatePicker("#date_begin", "#date_end")

    //还没有添加注释
  • 相关阅读:
    Cocos2Dx for XNA类解析(1): CCApplication
    struts2动态调用action的方法
    python导出依赖包
    python 字符串split()方法
    struts2使用通配符调用action
    python3重新编译
    Jquery中html()、text()、val()的使用和区别
    Javascript写在<body>和<head>中的区别
    设计模式Design Pattern(2)单例模式
    设计模式Design Pattern(1)简介
  • 原文地址:https://www.cnblogs.com/nf1206/p/6627494.html
Copyright © 2011-2022 走看看