zx66
/
kjh.api.55128.cn_old


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!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 type="text/javascript" src="../jquery-1.7.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）、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护！</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>