手机适配时间控件

/* 
 * 日期插件
 * 滑动选取日期（年，月，日）
 * V2.1
 */
(function ($) {
    $.fn.date = function (options, Ycallback, Ncallback) {
        //插件默认选项
        var that = $(this);
        var docType = $(this).is('input');
        var datetime = false;
        var nowdate = new Date();
        var indexY = 1,
            indexM = 1,
            indexD = 1;
        var indexH = 1,
            indexI = 1,
            indexS = 0;
        var initY = parseInt((nowdate.getYear() + "").substr(1, 2));
        var initM = parseInt(nowdate.getMonth() + "") + 1;
        var initD = parseInt(nowdate.getDate() + "");
        var initH = parseInt(nowdate.getHours());
        var initI = parseInt(nowdate.getMinutes());
        var initS = parseInt(nowdate.getYear());
        var yearScroll = null,
            monthScroll = null,
            dayScroll = null;
        var HourScroll = null,
            MinuteScroll = null,
            SecondScroll = null;
        $.fn.date.defaultOptions = {
            beginyear: 1900, //日期--年--份开始
            endyear: 2999, //日期--年--份结束
            beginmonth: 1, //日期--月--份结束
            endmonth: 12, //日期--月--份结束
            beginday: 1, //日期--日--份结束
            endday: 31, //日期--日--份结束
            beginhour: 1,
            endhour: 12,
            beginminute: 00,
            endminute: 59,
            curdate: true, //打开日期是否定位到当前日期
            theme: "date", //控件样式（1：日期，2：日期+时间）
            mode: null, //操作模式（滑动模式）
            event: "click", //打开日期插件默认方式为点击后后弹出日期
            show: true,
            fromat: 'yyyy/dd/mm'
        };
        //用户选项覆盖插件默认选项   
        var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
        if (opts.theme === "datetime") {
            datetime = true;
        }
        if (!opts.show) {
            that.unbind(opts.event);
        } else {
            //绑定事件（默认事件为获取焦点）
            that.bind(opts.event, function () {
                createUL(); //动态生成控件显示的日期
                init_iScrll(); //初始化iscrll
                extendOptions(); //显示控件
                that.blur();
                if (datetime) {
                    showdatetime();
                    refreshTime();
                }
                refreshDate();
                bindButton();
            });
        }
        //>2000年
        if (opts.beginyear < 2000) {
            initY = initY + 100;
        }

        function refreshDate() {
            yearScroll.refresh();
            monthScroll.refresh();
            dayScroll.refresh();

            resetInitDete();
            yearScroll.scrollTo(0, initY * 40, 100, true);
            monthScroll.scrollTo(0, initM * 40 - 40, 100, true);
            dayScroll.scrollTo(0, initD * 40 - 40, 100, true);
        }

        function refreshTime() {
            HourScroll.refresh();
            MinuteScroll.refresh();
            SecondScroll.refresh();
            if (initH > 12) { //判断当前时间是上午还是下午
                SecondScroll.scrollTo(0, initD * 40 - 40, 100, true); //显示“下午”
                initH = initH - 12 - 1;
            }
            HourScroll.scrollTo(0, initH * 40, 100, true);
            MinuteScroll.scrollTo(0, initI * 40, 100, true);
            initH = parseInt(nowdate.getHours());
        }

        function resetIndex() {
            indexY = 1;
            indexM = 1;
            indexD = 1;
        }

        function resetInitDete() {

            if (opts.curdate) {
                return false;
            } else if (that.val() === "") {
                return false;
            }

            initY = parseInt(that.val().substr(2, 2));
            initM = parseInt(that.val().substr(5, 2));
            initD = parseInt(that.val().substr(8, 2));
        }

        function bindButton() {
            resetIndex();
            $("#dateconfirm").unbind('click').click(function () {

                var datestr = function () {
                    var d = '';
                    d = opts.fromat.replace('yyyy', $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1));
                    d = d.replace('mm', $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1));
                    d = d.replace('dd', $("#daywrapper ul li:eq(" + Math.round(indexD) + ")").html().substr(0, $("#daywrapper ul li:eq(" + Math.round(indexD) + ")").html().length - 1))

                    if (datetime) {
                        if (Math.round(indexS) === 1) { //下午
                            $("#Hourwrapper ul li:eq(" + indexH + ")").html(parseInt($("#Hourwrapper ul li:eq(" + indexH + ")").html()
                                .substr(0, $("#Hourwrapper ul li:eq(" + indexH + ")").html().length - 1)) + 12)
                        } else {
                            $("#Hourwrapper ul li:eq(" + indexH + ")").html(parseInt($("#Hourwrapper ul li:eq(" + indexH + ")").html()
                                .substr(0, $("#Hourwrapper ul li:eq(" + indexH + ")").html().length - 1)))
                        }
                        d = d.replace('hh', $("#Hourwrapper ul li:eq(" + indexH + ")").html().substr(0, $("#Minutewrapper ul li:eq(" + indexH + ")").html().length - 1));
                        d = d.replace('ii', $("#Minutewrapper ul li:eq(" + indexI + ")").html().substr(0, $("#Minutewrapper ul li:eq(" + indexI + ")").html().length - 1));


                        indexS = 0;
                    }
                    return d

                }


                if (Ycallback === undefined) {
                    if (docType) {
                        that.val(datestr);
                    } else {
                        that.html(datestr);
                    }
                } else {
                    Ycallback(datestr);
                }
                $("#datePage").hide();
                $("#dateshadow").hide();
            });
            $("#datecancle").click(function () {
                $("#datePage").hide();
                $("#dateshadow").hide();
                //Ncallback(false);
            });
        }

        function extendOptions() {
            $("#datePage").show();
            $("#dateshadow").show();
        }

        //日期滑动
        function init_iScrll() {
            var strY = $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1);
            var strM = $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
            yearScroll = new iScroll("yearwrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexY = (this.y / 40) * (-1) + 1;
                    opts.endday = checkdays(strY, strM);
                    $("#daywrapper ul").html(createDAY_UL());
                    dayScroll.refresh();
                }
            });
            monthScroll = new iScroll("monthwrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexM = (this.y / 40) * (-1) + 1;
                    opts.endday = checkdays(strY, strM);
                    $("#daywrapper ul").html(createDAY_UL());
                    dayScroll.refresh();
                }
            });
            dayScroll = new iScroll("daywrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexD = (this.y / 40) * (-1) + 1;
                }
            });
        }

        function showdatetime() {
            init_iScroll_datetime();
            addTimeStyle();
            $("#datescroll_datetime").show();
            $("#Hourwrapper ul").html(createHOURS_UL());
            $("#Minutewrapper ul").html(createMINUTE_UL());
            $("#Secondwrapper ul").html(createSECOND_UL());
        }

        //日期+时间滑动
        function init_iScroll_datetime() {
            HourScroll = new iScroll("Hourwrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexH = Math.round((this.y / 40) * (-1)) + 1;
                    HourScroll.refresh();
                }
            });
            MinuteScroll = new iScroll("Minutewrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexI = Math.round((this.y / 40) * (-1)) + 1;
                    HourScroll.refresh();
                }
            });
            SecondScroll = new iScroll("Secondwrapper", {
                snap: "li",
                vScrollbar: false,
                onScrollEnd: function () {
                    indexS = Math.round((this.y / 40) * (-1));
                    HourScroll.refresh();
                }
            });
        }

        function checkdays(year, month) {
            var new_year = year; //取当前的年份        
            var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）      

            if (month > 12) //如果当前大于12月，则年份转到下一年
            {
                new_month -= 12; //月份减
                new_year++; //年份增        
            }

            var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
            return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate(); //获取当月最后一天日期
        }

        function createUL() {
            CreateDateUI();
            $("#yearwrapper ul").html(createYEAR_UL());
            $("#monthwrapper ul").html(createMONTH_UL());
            $("#daywrapper ul").html(createDAY_UL());
        }

        function CreateDateUI() {
            var str = '' +
                '<div id="dateshadow"></div>' +
                '<div id="datePage" class="page">' +
                '<section>' +
                '<div id="datetitle"><h1>请选择日期</h1></div>' +
                '<div id="datemark"><a id="markyear"></a><a id="markmonth"></a><a id="markday"></a></div>' +
                '<div id="timemark"><a id="markhour"></a><a id="markminut"></a><a id="marksecond"></a></div>' +
                '<div id="datescroll">' +
                '<div id="yearwrapper">' +
                '<ul></ul>' +
                '</div>' +
                '<div id="monthwrapper">' +
                '<ul></ul>' +
                '</div>' +
                '<div id="daywrapper">' +
                '<ul></ul>' +
                '</div>' +
                '</div>' +
                '<div id="datescroll_datetime">' +
                '<div id="Hourwrapper">' +
                '<ul></ul>' +
                '</div>' +
                '<div id="Minutewrapper">' +
                '<ul></ul>' +
                '</div>' +
                '<div id="Secondwrapper">' +
                '<ul></ul>' +
                '</div>' +
                '</div>' +
                '</section>' +
                '<footer id="dateFooter">' +
                '<div id="setcancle">' +
                '<ul>' +
                '<li id="dateconfirm">确定</li>' +
                '<li id="datecancle">取消</li>' +
                '</ul>' +
                '</div>' +
                '</footer>' +
                '</div>';
            $("#datePlugin").html(str);
        }

        function addTimeStyle() {
            $("#datePage").css("height", "380px");
            $("#datePage").css("top", "60px");
            $("#yearwrapper").css("position", "absolute");
            $("#yearwrapper").css("bottom", "200px");
            $("#monthwrapper").css("position", "absolute");
            $("#monthwrapper").css("bottom", "200px");
            $("#daywrapper").css("position", "absolute");
            $("#daywrapper").css("bottom", "200px");
        }

        //创建 --年-- 列表
        function createYEAR_UL() {
            var str = "<li>&nbsp;</li>";

            for (var i = opts.beginyear; i <= opts.endyear; i++) {
                str += '<li>' + i + '年</li>';
            }
            return str + "<li>&nbsp;</li>";
        }

        //创建 --月-- 列表
        function createMONTH_UL() {
            var str = "<li>&nbsp;</li>";
            for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
                if (i < 10) {
                    i = "0" + i
                }
                str += '<li>' + i + '月</li>';
            }
            return str + "<li>&nbsp;</li>";
        }

        //创建 --日-- 列表
        function createDAY_UL() {
            $("#daywrapper ul").html("");
            var str = "<li>&nbsp;</li>";
            for (var i = opts.beginday; i <= opts.endday; i++) {
                str += '<li>' + i + '日</li>';
            }
            return str + "<li>&nbsp;</li>";
        }

        //创建 --时-- 列表
        function createHOURS_UL() {
            var str = "<li>&nbsp;</li>";
            for (var i = opts.beginhour; i <= opts.endhour; i++) {
                str += '<li>' + i + '时</li>';
            }
            return str + "<li>&nbsp;</li>";
        }

        //创建 --分-- 列表
        function createMINUTE_UL() {
            var str = "<li>&nbsp;</li>";
            for (var i = opts.beginminute; i <= opts.endminute; i++) {
                if (i < 10) {
                    i = "0" + i;
                }
                str += '<li>' + i + '分</li>';
            }
            return str + "<li>&nbsp;</li>";
        }

        //创建 --分-- 列表
        function createSECOND_UL() {
            var str = "<li>&nbsp;</li>";
            str += "<li>上午</li><li>下午</li>";
            return str + "<li>&nbsp;</li>";
        }
    }
})(jQuery);

引用

<script type="text/javascript" src="jquery-1.9.1.js" ></script>
<script type="text/javascript" src="date.js" ></script>
<script type="text/javascript" src="iscroll.js" ></script>
<script type="text/javascript">

$(function(){
    $('#beginTime').date({
        fromat: 'yyyy-mm-dd'
    });
    $('#endTime').date({
        theme:"datetime",

        fromat: 'yyyy年mm月dd日 hh时ii分'
    });
});

</script>

</head>
<body>   

<style type="text/css">
.demo{width:300px;margin:40px auto 0 auto;}
.demo .lie{margin:0 0 20px 0;}
</style>

<div class="demo">
    <div class="lie">日期设置-1:<input id="beginTime" class="kbtn" /></div>
    <div class="lie">日期设置-2:<input id="endTime" class="kbtn" /></div>
</div>


<div id="datePlugin"></div>

</body>