英文:
DatePicker Ant Design - add a mask to the manually entered date
问题
我想和你分享我在使用 Ant Design - React 的 DatePicker 组件时遇到的问题。
第一个挑战是为手动输入的日期添加掩码到输入字段中。
第二个挑战是在不必按日期确认按钮的情况下接受输入的更改。
英文:
I would like to share with you a problem I was having while using the DatePicker component from Ant Design - React.
The first challenge was to add a mask to the manually entered date in the input field.
The second challenge was to accept changes in the input without having to press the date confirmation button.
答案1
得分: 1
以下是您提供的代码部分的中文翻译：
<!-- 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>
如果您有任何其他需要，请随时提出。
英文:
Both issues were resolved as follows:
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>
And finally:
<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>
It may not be the best way to solve the problem, but it worked. I'm open to suggestions if anyone has a better idea of how to do it.
答案2
得分: 0
只创建一个被接受的日期格式数组
const dateFormatList = [
'DD/MM/YYYY',
'DD/MM/YY',
'DD-MM-YYYY',
'DD-MM-YY',
'DDMMYYYY',
'DDMMYY'
]
然后将其分配给DatePicker格式：
<DatePicker
mode={'date'}
format={dateFormatList}
/>
现在，如果您在日期字段中仅输入数字并按enter键，日期将被格式化为数组中的第一个可用格式。
英文:
Just create an array of accepted date formats
const dateFormatList = [
'DD/MM/YYYY',
'DD/MM/YY',
'DD-MM-YYYY',
'DD-MM-YY',
'DDMMYYYY',
'DDMMYY'
]
And assign it to DatePicker format:
<DatePicker
mode={ 'date' }
format={ dateFormatList }
/>
Now if you type only numbers in your date field and press enter the date will be formated to the first format available in your array.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论