EasyUI之下拉框combobox-蒲公英云

EasyUI之下拉框combobox

1、实例背景

 EasyUI下拉框combobox，实例给出一个日期控件和一个下拉框，选择日期控制下拉框的月份；改变下拉框选项就改变日期的月份。

2、实例源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>EasyUI之下拉框combobox</title>
        <link rel="stylesheet" href="../themes/black/easyui.css" />
        <link rel="stylesheet" href="../themes/icon.css" />
        <link rel="stylesheet" href="../css/demo.css" />
        <script type="text/javascript" src="../js/jquery.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
        <script>
            $(document).ready(function(){
                $("#datePicker").datebox({
                    onSelect:function(date){
                        $("#monthSelect").combobox("setValue",date.getMonth()+1);
                    }
                });
                $("#monthSelect").combobox({
                    onChange:function(n,o){
                        var date = new Date();
                        var month = $(this).combobox("getValue");
                        var year = date.getFullYear();
                        var day = date.getDate();
                        var changeMonth = year + "-" + (month<10?("0"+month):month) + "-" + (day<10?"0"+day:day);
                        $("#datePicker").datebox("setValue",changeMonth);
                    }
                });
            });
            function formatterDate(date)
            {
                var y = date.getFullYear();
                var m = date.getMonth()+1;
                var d = date.getDate();
                return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
            }
            function myparser(s)
            {
                if (!s) return new Date();
                var ss = (s.split('-'));
                var y = parseInt(ss[0],10);
                var m = parseInt(ss[1],10);
                var d = parseInt(ss[2],10);
                if (!isNaN(y) && !isNaN(m) && !isNaN(d))
                {
                    return new Date(y,m-1,d);
                } 
                else 
                {
                    return new Date();
                }
            }
        </script>
    </head>
    <body>
        <div class="easyui-panel" style="width:100%;max-width:400px;height: 400px;">
            <div style="margin-bottom:20px">
                <input id="datePicker" class="easyui-datebox" label="日期:" data-options="formatter:formatterDate,parser:myparser" labelPosition="top" style="width:100%;">
            </div>
            <div style="margin-bottom:20px">
                <select id="monthSelect" class="easyui-combobox" name="month" label="月份:" labelPosition="top" style="width:100%;">
                    <option value="1">一月</option>
                    <option value="2">二月</option>
                    <option value="3">三月</option>
                    <option value="4">四月</option>
                    <option value="5">五月</option>
                    <option value="6">六月</option>
                    <option value="7">七月</option>
                    <option value="8">八月</option>
                    <option value="9">九月</option>
                    <option value="10">十月</option>
                    <option value="11">十一月</option>
                    <option value="12">十二月</option>
                </select>
            </div>
        </div>
    </body>
</html>