¶þ. ¹¦Äܼ°Ê¾Àý
4. ÈÕÆÚ·¶Î§ÏÞÖÆ
- ¾²Ì¬ÏÞÖÆ
×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë 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'})"/> - ¶¯Ì¬ÏÞÖÆ
×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë 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'})"/> - ½Å±¾×Ô¶¨ÒåÏÞÖÆ
×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë 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})"/> - ÎÞЧÌì
¿ÉÒÔʹÓô˹¦ÄܽûÓÃÖÜÈÕÖÁÖÜÁùËù¶ÔÓ¦µÄÈÕÆÚ,Ïà¹ØÊôÐÔ: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]})"/> - ÎÞЧÈÕÆÚ
×¢Òâ:ÈÕÆÚ¸ñʽ±ØÐëÓë 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()}']})"/> - ÓÐЧÈÕÆÚ
ʹÓÃÎÞЧÈÕÆÚ¿ÉÒԺܷ½±ãµÄ½ûÓò»¿ÉÓõÄÈÕÆÚ,µ«ÊÇÔÚÖ»ÐèÒªÆôÓÃÉÙ²¿·ÖÈÕÆÚµÄÇé¿öÏÂ,ÓÐЧÈÕÆÚµÄ¹¦Äܾͷdz£ÊʺÏÁË.
¹Ø¼üÊôÐÔ: opposite ĬÈÏΪfalse, Ϊtrueʱ,ÎÞЧÈÕÆÚ±ä³ÉÓÐЧÈÕÆÚ,¸ÃÊôÐÔ¶ÔÎÞЧÌì,ÌØÊâÌì²»Æð×÷ÓÃʾÀý4-6 Ö»ÆôÓà ÿ¸öÔÂ·ÝµÄ 5ÈÕ 15ÈÕ 25ÈÕ
<input id="d46" type="text" class="Wdate" onFocus="WdatePicker({opposite:true,disabledDates:['5$']})"/>
×¢Òâ :'5$' ±íʾÒÔ 5 ½áβ ×¢Òâ $ µÄÓ÷¨ - ÌØÊâÌìºÍÌØÊâÈÕÆÚ
ÌØÊâÌìºÍÌØÊâÈÕÆÚµÄÓ÷¨¸úÍêÈ«ÎÞЧÌìºÍÎÞЧÈÕÆÚÍêÈ«Ïàͬ,µ«ÊÇ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']})"/>