jquery DatePicker Ant设计-为手动输入的日期添加掩码

i7uq4tfw  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(217)

我想和你分享一个我在使用Ant Design - React中的DatePicker组件时遇到的问题。
第一个挑战是为输入字段中手动输入的日期添加掩码。
第二个挑战是接受输入中的更改,而不必按下日期确认按钮。

ocebsuys

ocebsuys1#

这两个问题的解决方法如下:
public/index.html

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

<!-- jquery-mask -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

<!-- mask formatter -->
<script>
  jQuery(function($){
    $('form').on('DOMSubtreeModified', function(){
      $('.ant-picker-input').find('input').attr('maxlength', '10').mask('99/99/9999');
    });

    $('.ant-picker-input').find('input').attr('maxlength', '10').mask('99/99/9999');
  });
</script>

最后:

<Form.Item
  label="Data de nascimento"
  name="birthDate">
     <DatePicker style={{width: '100%'}} format="DD/MM/YYYY" onBlur={(date) =>{
     const currentFormInitialValues = form.getFieldsValue();                                      
     currentFormInitialValues.birthDate = dayjs(date.target.value, 'DD/MM/YYYY');
                                            
     if(!date.target.value || date.target.value === ''){
        return
     }else{                                              
        form.setFieldsValue(currentFormInitialValues);
     };
 }}/>
</Form.Item>

这可能不是解决问题的最佳方法,但它奏效了。如果有人有更好的主意,我愿意接受建议。

blmhpbnm

blmhpbnm2#

只需创建一个可接受的日期格式数组

const dateFormatList = [
  'DD/MM/YYYY',
  'DD/MM/YY',
  'DD-MM-YYYY',
  'DD-MM-YY',
  'DDMMYYYY',
  'DDMMYY'
]

并将其分配为DatePicker格式:

<DatePicker
  mode={ 'date' }
  format={ dateFormatList }
/>

现在,如果您在日期字段中仅键入数字并按enter,则日期将被格式化为数组中可用的第一种格式。

相关问题