¶þ. ¹¦Äܼ°Ê¾Àý

4. ÈÕÆÚ·¶Î§ÏÞÖÆ

  1. ¾²Ì¬ÏÞÖÆ
    ×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë realDateFmt ºÍ realTimeFmt Ò»Ö¶ø²»ÊÇÓë dateFmt Ò»ÖÂ

    Äã¿ÉÒÔ¸øÍ¨¹ýÅäÖÃminDate(×îСÈÕÆÚ),maxDate(×î´óÈÕÆÚ)Ϊ¾²Ì¬ÈÕÆÚÖµ,À´ÏÞ¶¨ÈÕÆÚµÄ·¶Î§

    ʾÀý4-1-1 ÏÞÖÆÈÕÆÚµÄ·¶Î§ÊÇ 2006-09-10µ½2008-12-20


    <input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>

    ʾÀý4-1-2 ÏÞÖÆÈÕÆÚµÄ·¶Î§ÊÇ 2008-3-8 11:30:00 µ½ 2008-3-10 20:59:30


    <input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>

    ʾÀý4-1-3 ÏÞÖÆÈÕÆÚµÄ·¶Î§ÊÇ 2008Äê2Ô µ½ 2008Äê10ÔÂ


    <input type="text" class="Wdate" id="d413" onfocus="WdatePicker({dateFmt:'yyyyÄêMÔÂ',minDate:'2008-2',maxDate:'2008-10'})"/>

    ʾÀý4-1-4 ÏÞÖÆÈÕÆÚµÄ·¶Î§ÊÇ 8:00:00 µ½ 11:30:00


    <input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

  2. ¶¯Ì¬ÏÞÖÆ
    ×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë realDateFmt ºÍ realTimeFmt Ò»Ö¶ø²»ÊÇÓë dateFmt Ò»ÖÂ

    Äã¿ÉÒÔͨ¹ýϵͳ¸ø³öµÄ¶¯Ì¬±äÁ¿,Èç%y(µ±Ç°Äê),%M(µ±Ç°ÔÂ)µÈÀ´ÏÞ¶ÈÈÕÆÚ·¶Î§,Ä㻹¿ÉÒÔͨ¹ý{}½øÐбí´ïʽÔËËã,Èç:{%d+1}:±íʾÃ÷Ìì

    ¶¯Ì¬±äÁ¿±í

    ¸ñʽ ˵Ã÷
    %y µ±Ç°Äê
    %M µ±Ç°ÔÂ
    %d µ±Ç°ÈÕ
    %ld ±¾ÔÂ×îºóÒ»Ìì
    %H µ±Ç°Ê±
    %m µ±Ç°·Ö
    %s µ±Ç°Ãë
    {} ÔËËã±í´ïʽ,Èç:{%d+1}:±íʾÃ÷Ìì
    #F{} {}Ö®¼äÊǺ¯Êý¿Éд×Ô¶¨ÒåJS´úÂë

    ʾÀý4-2-1 Ö»ÄÜÑ¡Ôñ½ñÌìÒÔǰµÄÈÕÆÚ(°üÀ¨½ñÌì)


    <input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

    ʾÀý4-2-2 ʹÓÃÁËÔËËã±í´ïʽ Ö»ÄÜÑ¡Ôñ½ñÌìÒÔºóµÄÈÕÆÚ(²»°üÀ¨½ñÌì)


    <input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

    ʾÀý4-2-3 Ö»ÄÜÑ¡Ôñ±¾ÔµÄÈÕÆÚ1ºÅÖÁ±¾ÔÂ×îºóÒ»Ìì


    <input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

    ʾÀý4-2-4 Ö»ÄÜÑ¡Ôñ½ñÌì7:00:00ÖÁÃ÷Ìì21:00:00µÄÈÕÆÚ


    <input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-{%d+1} 21:00:00'})"/>

    ʾÀý4-2-5 ʹÓÃÁËÔËËã±í´ïʽ Ö»ÄÜÑ¡Ôñ 20Сʱǰ ÖÁ 30Сʱºó µÄÈÕÆÚ


    <input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d {%H-20}:%m:%s',maxDate:'%y-%M-%d {%H+30}:%m:%s'})"/>

  3. ½Å±¾×Ô¶¨ÒåÏÞÖÆ
    ×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë realDateFmt ºÍ realTimeFmt Ò»Ö¶ø²»ÊÇÓë dateFmt Ò»ÖÂ

    ϵͳÌṩÁË$dp.$DºÍ$dp.$DVÕâÁ½¸öAPIÀ´¸¨ÖúÄã½øÐÐÈÕÆÚÔËËã,´ËÍâÄ㻹¿ÉÒÔͨ¹ýÔÚ #F{} ÖÐÌîÈëÄã×Ô¶¨ÒåµÄ½Å±¾,×öÈκÎÄãÏë×öµÄÈÕÆÚÏÞÖÆ

    ʾÀý4-3-1 Ç°ÃæµÄÈÕÆÚ²»ÄÜ´óÓÚºóÃæµÄÈÕÆÚÇÒÁ½¸öÈÕÆÚ¶¼²»ÄÜ´óÓÚ 2020-10-01

    ºÏͬÓÐЧÆÚ´Ó µ½
    <input id="d4311" class="Wdate" type="text" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2020-10-01\'}'})"/>
    <input id="d4312" class="Wdate" type="text" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2020-10-01'})"/>

    ×¢Òâ:
    Á½¸öÈÕÆÚµÄÈÕÆÚ¸ñʽ±ØÐëÏàͬ

    $dp.$ Ï൱ÓÚ document.getElementById º¯Êý.
    ÄÇôΪʲôÀïÃæµÄ ' ʹÓà \' ÄØ? ÄÇÊÇÒòΪ " ºÍ ' ¶¼±»ÍâΧµÄº¯ÊýʹÓÃÁË,¹ÊʹÓÃתÒå·û \ ,·ñÔò»áÌáʾJSÓï·¨´íÎó.
    ËùÒÔÄúÔÚÆäËûµØ·½Ê¹ÓÃʱעÒâ°Ñ \' ¸Ä³É " »òÕß ' À´Ê¹ÓÃ.

    #F{$dp.$D(\'d4312\')||\'2020-10-01\'} ±íʾµ± d4312 Ϊ¿Õʱ, ²ÉÓà 2020-10-01 µÄÖµ×÷Ϊ×î´óÖµ

    ʾÀý4-3-2 Ç°ÃæµÄÈÕÆÚ+3Ìì ²»ÄÜ´óÓÚ ºóÃæµÄÈÕÆÚ

    ÈÕÆÚ´Ó µ½
    <input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\',{d:-3});}'})"/>
    <input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\',{d:3});}'})"/>

    ʹÓà $dp.$D º¯Êý ¿ÉÒÔ½«ÈÕÆÚ¿òÖеÄÖµ,¼ÓÉ϶¨ÒåµÄÈÕÆÚ²îÁ¿:
    Á½¸ö²ÎÊý: id={×Ö·ûÀàÐÍ}ÐèÒª´¦ÀíµÄÎı¾¿òµÄidÖµ , obj={¶ÔÏóÀàÐÍ}ÈÕÆÚ²îÁ¿
    ÈÕÆÚ²îÁ¿Ó÷¨:
    ÊôÐÔy,M,d,H,m,s·Ö±ð´ú±íÄêÔÂÈÕʱ·ÖÃë
    Èç
    Ϊ¿Õʱ,±íʾֱ½Óȡֵ,²»×ö²îÁ¿(ʾÀý4-3-1ÖеIJÎÊý¾ÍÊǿյÄ)
    {M:5,d:7} ±íʾ Îå¸öÔÂÁã7Ìì
    {y:1,d:-3} ±íʾ 1ÄêÉÙ3Ìì
    {d:1,H:1} ±íʾһÌì¶à1Сʱ

    ʾÀý4-3-3 Ç°ÃæµÄÈÕÆÚ+3ÔÂÁã2Ìì ²»ÄÜ´óÓÚ ºóÃæµÄÈÕÆÚ ÇÒ Ç°ÃæÈÕÆÚ¶¼²»ÄÜ´óÓÚ 2020-4-3¼õÈ¥3ÔÂÁã2Ìì ºóÃæÈÕÆÚ ²»ÄÜ´óÓÚ 2020-4-3

    סµêÈÕÆÚ´Ó µ½
    <input type="text" class="Wdate" id="d4331" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4332\',{M:-3,d:-2})||$dp.$DV(\'2020-4-3\',{M:-3,d:-2})}'})"/>
    <input type="text" class="Wdate" id="d4332" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4331\',{M:3,d:2});}',maxDate:'2020-4-3'})"/>

    ×¢Òâ:
    #F{$dp.$D(\'d4332\',{M:-3,d:-2}) || $dp.$DV(\'2020-4-3\',{M:-3,d:-2})}
    ±íʾµ± d4332 Ϊ¿Õʱ, ²ÉÓà $dp.$DV(\'2020-4-3\',{M:-3,d:-2})} µÄÖµ×÷Ϊ×î´óÖµ

    ʹÓà $dp.$DV º¯Êý ¿ÉÒÔ½«ÏÔʽ´«ÈëµÄÖµ,¼ÓÉ϶¨ÒåµÄÈÕÆÚ²îÁ¿:
    Á½¸ö²ÎÊý: value={×Ö·ûÀàÐÍ}ÐèÒª´¦ÀíµÄÖµ , obj={¶ÔÏóÀàÐÍ}ÈÕÆÚ²îÁ¿
    Ó÷¨Í¬ÉÏÃæµÄ $dp.$D ÀàËÆ,Èç $dp.$DV(\'2020-4-3\',{M:-3,d:-2}) ±íʾ 2020-4-3¼õÈ¥3ÔÂÁã2Ìì

    ʾÀý4-3-4 ·¢»ÓÄãµÄJS²ÅÄÜ,¶¨ÒåÈκÎÄãÏëÒªµÄÈÕÆÚÏÞÖÆ

    ×Ô¶¯×ªµ½Ëæ»úÉú³ÉµÄÒ»Ìì,µ±È»,´ËʾÀýûÓÐʵ¼ÊµÄÓÃ;,Ö»ÊÇΪÑÝʾĿµÄ

    <script>
    //·µ»ØÒ»¸öËæ»úµÄÈÕÆÚ
    function randomDate(){
    var Y = 2000 + Math.round(Math.random() * 10);
    var M = 1 + Math.round(Math.random() * 11);
    var D = 1 + Math.round(Math.random() * 27);
    return Y+'-'+M+'-'+D;
    }
    </script>
    <input type="text" class="Wdate" id="d434" onFocus="var date=randomDate();WdatePicker({minDate:date,maxDate:date})"/>

  4. ÎÞЧÌì

    ¿ÉÒÔʹÓô˹¦ÄܽûÓÃÖÜÈÕÖÁÖÜÁùËù¶ÔÓ¦µÄÈÕÆÚ,Ïà¹ØÊôÐÔ:disabledDays (0ÖÁ6 ·Ö±ð´ú±í ÖÜÈÕÖÁÖÜÁù)

    ʾÀý4-4-1 ½ûÓà ÖÜÁù Ëù¶ÔÓ¦µÄÈÕÆÚ


    <input id="d441" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[6]})"/>

    ʾÀý4-4-2 ½ûÓà ÖÜÁù ÖÜÈÕ Ëù¶ÔÓ¦µÄÈÕÆÚ


    <input id="d442" type="text" class="Wdate" onFocus="WdatePicker({disabledDays:[0,6]})"/>

  5. ÎÞЧÈÕÆÚ
    ×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë realDateFmt ºÍ realTimeFmt Ò»Ö¶ø²»ÊÇÓë dateFmt Ò»ÖÂ

    ¿ÉÒÔʹÓô˹¦ÄܽûÓÃ,ËùÖ¸¶¨µÄÒ»¸ö»ò¶à¸öÈÕÆÚ,Ö»ÒªÄãÊìϤÕýÔò±í´ïʽ,Äã¿ÉÒÔ¾¡Çé·¢»Ó

    Ó÷¨(ÕýÔòÆ¥Åä):
    Èç¹ûÄãÊìϤÕýÔò±í´ïʽ,»áºÜÈÝÒ×Àí½âÏÂÃæµÄÆ¥ÅäÓ÷¨
    Èç¹û²»ÊìϤ,¿ÉÒԲο¼ÏÂÃæµÄ³£ÓÃʾÀý
    ['2008-02-01','2008-02-29'] ±íʾ½ûÓà 2008-02-01 ºÍ 2008-02-29
    ['2008-..-01','2008-02-29'] ±íʾ½ûÓà 2008-ËùÓÐÔ·Ý-01 ºÍ 2008-02-29
    ['200[0-8]]-02-01','2008-02-29'] ±íʾ½ûÓà [2000ÖÁ2008]-02-01 ºÍ 2008-02-29
    ['^2006'] ±íʾ½ûÓà 2006ÄêµÄËùÓÐÈÕÆÚ

    ´ËÍâ,Äú»¹¿ÉÒÔʹÓà %y %M %d %H %m %s µÈ±äÁ¿, Ó÷¨Í¬¶¯Ì¬ÈÕÆÚÏÞÖÆ ×¢Òâ:%ld²»ÄÜʹÓÃ
    ['....-..-01','%y-%M-%d'] ±íʾ½ûÓà ËùÓÐÄê·ÝºÍËùÓÐÔ·ݵĵÚÒ»ÌìºÍ½ñÌì
    ['%y-%M-{%d-1}','%y-%M-{%d+1}'] ±íʾ½ûÓà ×òÌìºÍÃ÷Ìì

    µ±È»,³ýÁË¿ÉÒÔÏÞÖÆÈÕÆÚÒÔÍâ,Äú»¹¿ÉÒÔÏÞÖÆÊ±¼ä
    ['....-..-.. 10\:00\:00'] ±íʾ½ûÓà ÿÌì10µã (×¢Òâ : ÐèÒª ʹÓà \: )

    ²»ÔÙ¶à¾ÙÀýÁË,¾¡Çé·¢»ÓÄãµÄÕýÔò²ÅÄܰÉ!

    ʾÀý4-5-1 ½ûÓà ÿ¸öÔÂ·ÝµÄ 5ÈÕ 15ÈÕ 25ÈÕ


    <input id="d451" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['5$']})"/>

    ×¢Òâ :'5$' ±íʾÒÔ 5 ½áβ ×¢Òâ $ µÄÓ÷¨

    ʾÀý4-5-2 ½ûÓà ËùÓÐÔçÓÚ2000-01-01µÄÈÕÆÚ


    <input id="d452" type="text" class="Wdate" onFocus="WdatePicker({disabledDates:['^19']})"/>

    ×¢Òâ:'^19' ±íʾÒÔ 19 ¿ªÍ· ×¢Òâ ^ µÄÓ÷¨
    µ±È»,¿ÉÒÔʹÓÃminDateʵÏÖÀàËÆµÄ¹¦ÄÜ ÕâÀïÖ÷ÒªÊÇ ÔÚÑÝʾ ^ µÄÓ÷¨

    ʾÀý4-5-3 ÅäºÏmin/maxDateʹÓÃ,¿ÉÒÔ°Ñ¿ÉÑ¡ÔñµÄÈÕÆÚ·Ö¸ô³É¶à¶Î

    ±¾Ê¾Àý±¾Ô¿ÉÓÃÈÕÆÚ·Ö¸ô³ÉÎå¶Î ·Ö±ðÊÇ: 1-3 8-10 16-24 26,27 29-ÔÂÄ©

    <input id="d453" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$']})"/>

    ʾÀý4-5-4 min/maxDate disabledDays disabledDates ÅäºÏʹÓà ¼´Ê¹ÔÚÒªÇó·Ç³£¿Á¿ÌµÄÇé¿öÏÂÒ²ÄÜÂú×ãÐèÇó


    <input id="d454" type="text" class="Wdate" onFocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld',disabledDates:['0[4-7]$','1[1-5]$','2[58]$'],disabledDays:[1,3,6]})"/>

    ʾÀý4-5-5 ½ûÓÃǰһ¸öСʱºÍºóÒ»¸öСʱÄÚËùÓÐʱ¼ä ʹÓà %y %M %d %H %m %s µÈ±äÁ¿

    Êó±êµã»÷ СʱÊäÈë¿òʱ,Äã»á·¢ÏÖµ±È»Ê±¼ä¶ÔÓ¦µÄǰһ¸öСʱºÍºóÒ»¸öСʱÊÇ»ÒÉ«µÄ

    <input id="d2a25" type="text" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',disabledDates:['%y-%M-%d {%H-1}\:..\:..','%y-%M-%d {%H+1}\:..\:..']})"/>

    ×¢Òâ:%y %M %dµÈÏê¼û¶¯Ì¬±äÁ¿±í

    ʾÀý4-5-6 #F{}Ò²ÊÇ¿ÉÒÔʹÓõÄ

    ±¾Ê¾ÀýÀûÓÃ×Ô¶¨Ò庯Êý Ëæ»ú½ûÓÃ0-23ÖеÄÈκÎÒ»¸öСʱ
    ´ò¿ªÐ¡Ê±Ñ¡Ôñ¿ò,Äã»á·¢ÏÖÓÐÒ»¸öСʱ±»½ûÓõÄ,¶øÇÒÿ´Î½ûÓõÄСʱ¶¼²»Í¬

    <script>
    function randomH(){
    //²úÉúÒ»¸öËæ»úµÄÊý×Ö 0-23
    var H = Math.round(Math.random() * 23);
    if(H<10) H='0'+H;
    //·µ»Ø '^' + Êý×Ö
    return '^'+H;
    }
    </script>
    <input type="text" class="Wdate" id="d456" onFocus="WdatePicker({dateFmt:'HH:mm:ss',disabledDates:['#F{randomH()}']})"/>

  6. ÓÐЧÈÕÆÚ

    ʹÓÃÎÞЧÈÕÆÚ¿ÉÒԺܷ½±ãµÄ½ûÓò»¿ÉÓõÄÈÕÆÚ,µ«ÊÇÔÚÖ»ÐèÒªÆôÓÃÉÙ²¿·ÖÈÕÆÚµÄÇé¿öÏÂ,ÓÐЧÈÕÆÚµÄ¹¦Äܾͷdz£ÊʺÏÁË.
    ¹Ø¼üÊôÐÔ: opposite ĬÈÏΪfalse, Ϊtrueʱ,ÎÞЧÈÕÆÚ±ä³ÉÓÐЧÈÕÆÚ,¸ÃÊôÐÔ¶ÔÎÞЧÌì,ÌØÊâÌì²»Æð×÷ÓÃ

    ʾÀý4-6 Ö»ÆôÓà ÿ¸öÔÂ·ÝµÄ 5ÈÕ 15ÈÕ 25ÈÕ


    <input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>

    ×¢Òâ :'5$' ±íʾÒÔ 5 ½áβ ×¢Òâ $ µÄÓ÷¨

  7. ÌØÊâÌìºÍÌØÊâÈÕÆÚ

    ÌØÊâÌìºÍÌØÊâÈÕÆÚµÄÓ÷¨¸úÍêÈ«ÎÞЧÌìºÍÎÞЧÈÕÆÚÍêÈ«Ïàͬ,µ«ÊÇoppositeÊôÐÔ¶ÔÆäÎÞЧ

    ¹Ø¼üÊôÐÔ:
    specialDays (0ÖÁ6 ·Ö±ð´ú±í ÖÜÈÕÖÁÖÜÁù) Ó÷¨Í¬ÎÞЧÌì
    specialDates Ó÷¨Í¬ÎÞЧÈÕÆÚ,µ«ÊǶÔʱ·ÖÃëÎÞЧ

    ʾÀý4-7-1 ¸ßÁÁÿÖÜ ÖÜÒ» ÖÜÎå


    <input id="d471" type="text" class="Wdate" onFocus="WdatePicker({specialDays:[1,5]})"/>

    ʾÀý4-7-2 ¸ßÁÁÿÔ 1ºÅ 15ºÅ


    <input id="d472" type="text" class="Wdate" onFocus="WdatePicker({specialDates:['....-..-01','....-..-15']})"/>

5. ×Ô¶¨Òåʼþ

6. ¿ìËÙÑ¡Ôñ¹¦ÄÜ

Èý. ÅäÖÃ˵Ã÷

ËÄ. ÈçºÎʹÓÃ