��. ���ܼ�ʾ��

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�﷨����.
    �������������ط�ʹ��ʱע��� \' �ij� " ���� ' ��ʹ��.

    #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 һ��

    ����ʹ�ô˹��ܽ���,��ָ����һ����������,ֻҪ����Ϥ�������ʽ,����Ծ��鷢��

    �÷�(����ƥ��):
    �������Ϥ�������ʽ,����������������ƥ���÷�
    �������Ϥ,���Բο�����ij���ʾ��
    ['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 ���ʹ�� ��ʹ��Ҫ��dz����̵������Ҳ����������


    <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. ����ѡ����

��. ����˵��

��. ���ʹ��