月份选择控件

Demo

<script src="http://yujiangong.com/jm_month/jg_month.js" type="text/javascript"></script>
<input class='inp' value='ss' οnclick='jmonth()' />

/*
@author:jiangong.yu
@date:17-4-5       
@use: onfoucs='jselect()'
*/
;!function (w) {
    dt = document;
    ce = "createElement",
    gi = "getElementById",
    gt = "getElementsByTagName",
   ac = 'appendChild';

    rc = 'removeChild';

    !function () {
        if (!dt[gi]('jstyle')) {


            var jcss = dt[ce]('link');
            jcss.rel = "stylesheet";
            jcss.id = "jstyle";
            jcss.href = (function () {
                var ja = dt.scripts;
                var jc = ja[ja.length - 1].src;
                var jpath;
                return jpath ? jpath : jc.substring(0, jc.lastIndexOf("/") + 1)
            })() + "jg_month.css";

            dt[gt]('head')[0][ac](jcss);
        }
    }();

    w.position = function (o, e) {
        var t = o.offsetTop;
        var l = o.offsetLeft;
        var w = o.clientWidth;
        var h = o.clientHeight;
        while (o = o.offsetParent) {
            t += o.offsetTop;
            l += o.offsetLeft;
        }
        return {
            'top': t,
            'left': l,
            'width': w,
            'height': h,
            'x': e.clientX - l,
            'y': e.clientY - t
        }

    },
    w.jmonth = function () {

     !!dt[gi]('jmonth')?  dt.body[rc](dt[gi]('jmonth')):1;
        var te = w.event;

        var para = position(te.target || te.srcElement, te);
        var jbox = dt[ce]('div');

        jbox.setAttribute('class', 'jbox');
        jbox.setAttribute('id', 'jmonth');
        jbox.style.left = para['left'] + 'px';
        jbox.style.top = (para['top'] + para['height'] + 4) + 'px';
        // jbox.style.width = para['width'] + 'px';
        jbox.innerHTML = "<input class='jbut jreduce'id='jreduce' type=button value='-' /><input class='jbut jyear' id='jyear' value='" +

            (function () {
                return (new Date()).getFullYear()
            })() + "' /><input class='jbut jadd' id='jadd' type=button value='+' />" +
        (function () {
            var ret = "";
            var mts = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            for (ms in mts) {
                ret += "<input class='jms' name='jms' ind='" + (ms * 1 + 1) + "' value='" + mts[ms] + "' type=button />";
            }
            return ret + "<a class='jlnk' href='javascript:;'>Close</a><a class='jlnk' href='javascript:;'>Clear</a>"
        })();


        dt.body[ac](jbox);

        jbox.addEventListener("click", function (event) {
            var target = event.target || event.srcElement;

            if (target == dt[gi]('jreduce')) {
                var yyyy = dt[gi]('jyear').value;
                yyyy > 1 ? dt[gi]('jyear').value = yyyy * 1 - 1 : 1;
            }
            if (target == dt[gi]('jadd')) {
                var yyyy = dt[gi]('jyear').value;
                yyyy < 9999 ? dt[gi]('jyear').value = yyyy * 1 + 1 : 1;
            }
            if (target.className.indexOf('jms') > -1) {
                te.target.value = dt[gi]('jyear').value + '' + ('0' + target.getAttribute('ind')).substr(-2, 2);
                setTimeout(function () { dt.body[rc](jbox); }, 100);
            }
            if (target.className.indexOf('jlnk') > -1) {
                target.innerHTML === 'Close' ? setTimeout(function () { dt.body[rc](jbox); }, 100) : 1;
                target.innerHTML === 'Clear' ? setTimeout(function () { te.target.value = ''; dt.body[rc](jbox); }, 100) : 1;
            }

        })

    }

} (window)




      

 .jbox{ position:absolute; border:1px solid #bbb;  background:#fff;  width:180px; font-size:14px; height:auto; }
    .jbox select{ width:80%; height:20px;  }
    .jbut{ height:20px; border:1px solid #bbb; margin:4px; top:1px; position:relative; cursor:pointer; }
    .jyear{ width:96px;}
    .jreduce,.jadd{ height:24px; width:26px;  background-color:#bbb; color:#fff;  font-size:1.2em; }
    .jms{ margin:3px;  height:28px; width:38px; color:#666; border:1px solid #bbb; background-color:#fff; cursor:pointer;}
    .jms:hover{ background-color:#bbb;}
    .jlnk{ float:right; margin:3px; font-family:Arial; font-size:0.9em;}