My97DatePicker 按天 按周 按月 按季 按年查询 亲测有效

 http://www.cnblogs.com/kevin-zlg/p/4631413.html

        前台页面需要使用日期控件时，同事选择了My97DatePicker，功能还是挺强大的，在使用过程中需要实现按日、按周、按月、按季度、按年选择时间的功能。

控件自身提供了按日、按月和按年选择的功能，但是选择周和选择季度没有，鉴于方便，在选择周时就使用了选择日的状态，选择了日后再计算这一天所属的周的起始和结束日期。

在选择季度时，使用了选择月份的状态，选择月份后计算所属的季度的开始和结束日期。

        控件本身有很详细的帮助文档，页面http://www.my97.net/dp/demo/index.htm，关于控件的使用都可以参考官方的demo，而且可以在线看到效果，直观简单，就是公司里上网太不方便。

        这里记录几个发现的问题：

        1. 控件可以在onfocus或者onclick事件中创建，实现弹出时间选择框的功能，但是发现在使用onfocus时，当选择了一次时间后，焦点默认还是在此输入框上，所以当想更改时间时，需要改变焦点再重新点击此输入框，操作上有问题，所以如果是实现点击弹出时间选择框的话，还是使用onclick事件比较合理。

        2. $dp.$DV方法文档上说是返回时间字符串，但是实际使用中返回的是控件自定义的时间对象，有y、M、d、H、m、s属性，分别返回年、月、日、时、分、秒。所以为了获取到字符串，不得不自己写转换函数。

 

        下面是这个小功能的核心代码，里面用到的关于控件的方法都是比较常用的，在公司里上网环境查控件的文档实在是太麻烦了，以后我自己看下下面的代码，基本的使用应该都木有问题了。

代码：

<table >
    <tr>
        <th>查询时间类型</th>
        <td>
            <select id="selType" name="dept" style="width: 150px;" >
                <option value="1">按日</option>
                <option value="2">按周</option>
                <option value="3">按月</option>
                <option value="4">按季</option>
                <option value="5">按年</option>
            </select>
        </td>
        <th>统计时间</th>
        <td>
            <input id="starttime" class="Wdate" οnclick="createWdatePicker();" />
        </td>
    </tr>
    <tr>
        <th>选中时间段</th>
        <td>
            <input id="showstarttime" type="text" readonly="readonly" />
        </td>
        <th>到</th>
        <td>
            <input id="showendtime" type="text" readonly="readonly" />
        </td>
    </tr>
</table>

<script type="text/javascript" >
    /**
     选择时间的输入框被选中时，创建datepicker控件
     根据设置不同dateFmt 格式，使空间支持选择日，周，月，季，年
     */
    function createWdatePicker() {

        var type = $("#selType").val();

        if (type == 1) {//按日
            WdatePicker({
                readOnly : true,
                dateFmt : 'yyyy-MM-dd',
            onpicked : pickTime,
                isShowWeek : true,
                maxDate : '%y-%M-%d'
        });
        } else if (type == 2) {//按周
            WdatePicker({
                readOnly : true,
                dateFmt : 'yyyy-MM-dd',
            onpicked : pickTime,
                isShowWeek : true,
                maxDate : '%y-%M-%d'
        });
        } else if (type == 3) {//按月
            WdatePicker({
                readOnly : true,
                dateFmt : 'yyyy-MM',
            onpicked : pickTime,
                isShowWeek : true,
                maxDate : '%y-%M-%d'
        });
        } else if (type == 4) {//按季
            WdatePicker({
                readOnly : true,
                dateFmt : 'yyyy-MM',
            onpicked : pickTime,
                isShowWeek : true,
                maxDate : '%y-%M-%d'
        });
        } else if (type == 5) {//按年
            WdatePicker({
                readOnly : true,
                dateFmt : 'yyyy',
            onpicked : pickTime,
                isShowWeek : true,
                maxDate : '%y-%M-%d'
        });
        }

    };

    /**
     控件时间选中后，onpicked 事件对应的方法
     根据不同的选择类型：日周月季年，计算最终选中的时间段
     */
    function pickTime() {

        var type = $("#selType").val();

        if (type == 1) {//按日
            //获取控件选择的时间，格式是根据设置的dateFmt : 'yyyy-MM-dd'
            var datetime = $dp.cal.getDateStr();
            $("#showstarttime").val(datetime + " 00:00:00");
            $("#showendtime").val(datetime + " 23:59:59");
        } else if (type == 2) {//按周
            var datetime = $dp.cal.getDateStr();
            //获取星期几，控件提供的方法
            var dstart = -$dp.cal.getP('w', 'w');
            var dend = dstart + 6;
            //计算一周的开始日期和结束日期，这个方法文档说返回的是字符串，但是实际中返回的是控件定义的时间对象，所以后面得自己转换成字符串
            var datestart = $dp.$DV(datetime, {
                d : dstart
            });
            var dateend = $dp.$DV(datetime, {
                d : dend
            });

            $("#showstarttime").val(dateToString(datestart) + " 00:00:00");
            $("#showendtime").val(dateToString(dateend) + " 23:59:59");
        } else if (type == 3) {//按月
            var y = $dp.cal.getP('y', 'yyyy');
            var M = $dp.cal.getP('M', 'M');

            var d = new Date(y, M, 0);

            var datestart = {};
            datestart.y = y;
            datestart.M = M;
            datestart.d = 1;
            var dateend = {};
            dateend.y = y;
            dateend.M = M;
            //获取月的最后一天
            dateend.d = d.getDate();

            $("#showstarttime").val(dateToString(datestart) + " 00:00:00");
            $("#showendtime").val(dateToString(dateend) + " 23:59:59");

        } else if (type == 4) {//按季
            var y = $dp.cal.getP('y', 'yyyy');
            var M = $dp.cal.getP('M', 'M');

            //计算季度的开始月份和结束月份
            var startM = parseInt((M - 1) / 3) * 3 + 1;
            var endM = startM + 2;

            var d = new Date(y, endM, 0);

            var datestart = {};
            datestart.y = y;
            datestart.M = startM;
            datestart.d = 1;
            var dateend = {};
            dateend.y = y;
            dateend.M = endM;
            //获取最后一个月的最后一天
            dateend.d = d.getDate();

            $("#showstarttime").val(dateToString(datestart) + " 00:00:00");
            $("#showendtime").val(dateToString(dateend) + " 23:59:59");

        } else if (type == 5) {//按年

            var y = $dp.cal.getP('y', 'yyyy');
            //这里可以直接字符串拼凑写死，但是为了格式统一，还是创建对象在转化吧
            var datestart = {};
            datestart.y = y;
            datestart.M = 1;
            datestart.d = 1;
            var dateend = {};
            dateend.y = y;
            dateend.M = 12;
            dateend.d = 31;

            $("#showstarttime").val(dateToString(datestart) + " 00:00:00");
            $("#showendtime").val(dateToString(dateend) + " 23:59:59");
        }

    };
    /**
     控件返回的时间对象转换成字符串输出
     控件的时间对象有y,M,d,H,m,s属性，分别返回年，月，日，时，分，秒
     */
    function dateToString(date) {
        var strdate = "";
        strdate = strdate + date.y + "-";
        var M = date.M >= 10 ? date.M : ("0" + date.M);
        strdate = strdate + M;
        var d = date.d >= 10 ? date.d : ("0" + date.d);
        strdate = strdate + "-" + d;
        return strdate;
    };
</script>