zoukankan      html  css  js  c++  java
  • 日期选择器

    缘起: 今天用到一个时间组件,本来可以用现成的很多现成的 JQuery 的时间选择器, 只是为了符合UI所以,自己写了一个。

            <div class="set_form">
                <dl class="center">
                                </dl>
                <dl class="center mt10">
    
                    <span class="mr10">
                        <select name="y">
                            <option value="">2012</option>
                        </select>
                        <select name="m">
                            <option value="">03</option>
                        </select>
                        <select name="d">
                            <option value="">20</option>
                        </select>
                    </span>
                    <select name="h">
                        <option value="">10</option>
                    </select>
                    :
                <select name="min">
                    <option value="">00</option>
                </select>
    
                </dl>
                <dl class="set_btn"><a class="reg_btn12" href="javascript:void(0);"><span>确定</span></a><a class="reg_btn12 ml10" href="javascript:void(0);"><span>取消</span></a></dl>
            </div>
            <script type="text/javascript">
                var timer = {
                    MonHead: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
                    bindevent: function () {
                        $('select[name=y],select[name=m]').change(function () {
                            timer.changYMoption();
                        });
                    },
                    inittimer: function () {
                        timer.initSelect($('select[name=y]'), 2012, 2020, 4);
                        timer.initSelect($('select[name=m]'), 1, 12);
                        timer.initSelect($('select[name=d]'), 1, timer.MonHead[$('select[name=m]').val() - 1]);
                        timer.initSelect($('select[name=h]'), 0, 23);
                        timer.initSelect($('select[name=min]'), 0, 59);
                        timer.bindevent();
                    },
                    initSelect: function (sel, from, to, len) {
                        if (len == undefined) len = 2;
                        $(sel).empty();
                        for (var i = from; i <= to; i++) {
                            $(sel).append($('<option value="' + i + '">' + addZero('' + i, len) + '</option>'));
                        }
                    },
                    selectSelect: function (sel, val) {
                        $(sel).val(val);
                    },
                    setdate: function (date) {
                        timer.selectSelect($('select[name=y]'), date.getFullYear());
                        timer.selectSelect($('select[name=m]'), date.getMonth() + 1);
                        timer.selectSelect($('select[name=d]'), date.getDate());
                        timer.selectSelect($('select[name=h]'), date.getHours());
                        timer.selectSelect($('select[name=min]'), date.getMinutes());
                    },
                    getdate: function () {
                        return new Date($('select[name=y]').val(), $('select[name=m]').val(), $('select[name=d]').val(), $('select[name=h]').val(), $('select[name=min]').val(), 0, 0);
                    },
                    changYMoption: function () {
                        var y = $('select[name=y]').val();
                        var m = $('select[name=m]').val();
                        var d = timer.MonHead[m - 1];
                        if (m == 2 && timer.IsLeapYear(y)) {
                            d = 29;
                        } else if (m == 2 && !timer.IsLeapYear(y)) {
                            d = 28;
                        }
                        var dval = $('select[name=d]').val();
                        timer.initSelect($('select[name=d]'), 1, d);
                        $('select[name=d]').val(dval);
                    },
                    IsLeapYear: function (year)//判断是否闰平年
                    {
                        return (0 == year % 4 && (year % 100 != 0 || year % 400 == 0));
                    }
                };
    
                $(function () {
                    timer.inittimer();
                    //timer.setdate(new Date());
                    //window.alert($.toJSON(timer.getdate()));
                });
            </script>

  • 相关阅读:
    深入理解计算机系统读书笔记之第二章信息的表示和处理
    深入理解计算机系统读书笔记之第一章:漫游
    算法三之归并排序
    算法二之子集和数问题
    算法一之N皇后问题
    刚刚注册写一写
    linux alias(命令别名)
    linux [CTRL]+c与[CTRL]+d
    linux终端类型
    linux 进程简介
  • 原文地址:https://www.cnblogs.com/zbw911/p/2630235.html
Copyright © 2011-2022 走看看