我想和你分享一个我在使用Ant Design - React中的DatePicker组件时遇到的问题。第一个挑战是为输入字段中手动输入的日期添加掩码。第二个挑战是接受输入中的更改,而不必按下日期确认按钮。
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>
这可能不是解决问题的最佳方法,但它奏效了。如果有人有更好的主意,我愿意接受建议。
blmhpbnm2#
只需创建一个可接受的日期格式数组
const dateFormatList = [ 'DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY', 'DDMMYYYY', 'DDMMYY' ]
并将其分配为DatePicker格式:
<DatePicker mode={ 'date' } format={ dateFormatList } />
现在,如果您在日期字段中仅键入数字并按enter,则日期将被格式化为数组中可用的第一种格式。
enter
2条答案
按热度按时间ocebsuys1#
这两个问题的解决方法如下:
public/index.html
最后:
这可能不是解决问题的最佳方法,但它奏效了。如果有人有更好的主意,我愿意接受建议。
blmhpbnm2#
只需创建一个可接受的日期格式数组
并将其分配为DatePicker格式:
现在,如果您在日期字段中仅键入数字并按
enter
,则日期将被格式化为数组中可用的第一种格式。