GZMachinesWeb/.svn/pristine/23/2335b40e7cf254f22713896e71a...

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>jeDate日期控件 - 演示</title>
    <link type="text/css" rel="stylesheet" href="jeDate-test.css">
    <link type="text/css" rel="stylesheet" href="skin/jedate.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jquery.jedate.js"></script>
    <script type="text/javascript" src="jedate-test.js"></script>
</head>
<body>
<div class="jebody">
    <blockquote class="jequote">
        <p style="text-align: center;font-size:24px;padding-bottom: 15px;">jeDate日期控件</p>
        jeDate除了包含初始化日期加减N、日期标注点、输入框可以直接输入时间、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。<br/><span style="color: red">您可以免费将她用于任何个人项目。但是不能去除头部信息。</span>  QQ群：516754269<br/><br/>
        <span style="color: red">此为部分个例展示，更多请看</span>&nbsp;&nbsp; <a href="http://www.jemui.com" style="color:#0a60d6;text-decoration:underline;">详细日期控件API</a>。<br/><br/>
    </blockquote>
    <div class="jewarp">
        <h3 class="gray">常规选择</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">年选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test01" placeholder="YYYY"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">年月选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test02" placeholder="YYYY-MM"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">年月日选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test03" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">年月日时分秒选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test04" placeholder="YYYY-MM-DD hh:mm:ss"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">时分秒选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test05" placeholder="hh:mm:ss"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">区域范围选择</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">年范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test06" placeholder="YYYY"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">年月范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test07" placeholder="YYYY-MM"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">日范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test08" placeholder="YYYY-MM-DD"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">区域范围双面板选择</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">年范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test09" placeholder="YYYY"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">年月范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test10" placeholder="YYYY-MM"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">日范围选择</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test11" placeholder="YYYY-MM-DD"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">自定义格式选择</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">自定义格式</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test12" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">自定义格式</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test13" placeholder="MM-DD-YYYY"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">自定义格式</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test14" placeholder="DD/MM/YYYY"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">一次绑定多个选择</h3>
        <div class="content">
            <div class="jeitem">
                <div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <div class="jeinpbox"><input type="text" class="jeinput moredate" placeholder="YYYY/MM/DD"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">其它功能展示选择</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">默认初始赋值</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test15" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">选中后的回调</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test16" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">日期切换的回调</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test17" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel" style="color:red;">双击输入框触发</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test18" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">设置自定义值</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test19" placeholder="YYYY-MM-DD"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">点击图标</label>
                <div class="jeinpbox" style="width: 145px;"><input type="text" class="jeinput" id="testico" placeholder="YYYY-MM-DD"></div>
                <div class="icons jebtns" onclick="$.jeDate('#testico',{trigger:false,format: 'YYYY-MM-DD'})"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">有效、无效日期限制</h3>
        <div class="content">
            <div class="jeitem">
                <label class="jelabel">有效日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test20" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">无效日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test22" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">指定日期正向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test24" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">有效日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test21" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">无效日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test23" placeholder="YYYY年MM月DD日"></div>
            </div>
            <div class="jeitem">
                <label class="jelabel">指定日期反向限制</label>
                <div class="jeinpbox"><input type="text" class="jeinput" id="test25" placeholder="YYYY年MM月DD日"></div>
            </div>
        </div>
    </div>
    <div class="jewarp">
        <h3 class="gray">直接展示日历</h3>
        <div class="content">
            <div class="jeitem" id="show01"></div>
            <div class="jeitem" id="show02"></div>
            <div class="jeitem" id="show03"></div>
            <div class="jeitem" id="show04"></div>
        </div>
    </div>
</div>
</body>
</html>