DatePicker Ant Design – 为手动输入的日期添加掩码

huangapple
go评论117阅读模式
英文:

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

以下是您提供的代码部分的中文翻译：

  1. <!-- jquery -->
  2. <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
  4. <!-- jquery-mask -->
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
  7. <!-- mask formatter -->
  8. <script>
  9.   jQuery(function($){
  10.     $('form').on('DOMSubtreeModified', function(){
  11.       $('.ant-picker-input').find('input').attr('maxlength', '10').mask('99/99/9999');
  12.     });
  14.     $('.ant-picker-input').find('input').attr('maxlength', '10').mask('99/99/9999');
  15.   });
  16. </script>

以及：

  1. <Form.Item
  2.   label="Data de nascimento"
  3.   name="birthDate">
  4.      <DatePicker style={{width: '100%'}} format="DD/MM/YYYY" onBlur={(date) =>{
  5.      const currentFormInitialValues = form.getFieldsValue();                                      
  6.      currentFormInitialValues.birthDate = dayjs(date.target.value, 'DD/MM/YYYY');
  7.                                             
  8.      if(!date.target.value || date.target.value === ''){
  9.         return
  10.      }else{                                              
  11.         form.setFieldsValue(currentFormInitialValues);
  12.      };
  13.  }}/>&lt;/Form.Item&gt;

如果您有任何其他需要，请随时提出。

英文:

Both issues were resolved as follows:

public/index.html

  1. &lt;!-- jquery --&gt;
  2. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.3.js&quot; integrity=&quot;sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  4. &lt;!-- jquery-mask --&gt;
  5. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js&quot;&gt;&lt;/script&gt;
  7. &lt;!-- mask formatter --&gt;
  8. &lt;script&gt;
  9.   jQuery(function($){
  10.     $(&#39;form&#39;).on(&#39;DOMSubtreeModified&#39;, function(){
  11.       $(&#39;.ant-picker-input&#39;).find(&#39;input&#39;).attr(&#39;maxlength&#39;, &#39;10&#39;).mask(&#39;99/99/9999&#39;);
  12.     });
  14.     $(&#39;.ant-picker-input&#39;).find(&#39;input&#39;).attr(&#39;maxlength&#39;, &#39;10&#39;).mask(&#39;99/99/9999&#39;);
  15.   });
  16. &lt;/script&gt;

And finally:

  1. &lt;Form.Item
  2.   label=&quot;Data de nascimento&quot;
  3.   name=&quot;birthDate&quot;&gt;
  4.      &lt;DatePicker style={{width: &#39;100%&#39;}} format=&quot;DD/MM/YYYY&quot; onBlur={(date) =&gt;{
  5.      const currentFormInitialValues = form.getFieldsValue();                                      
  6.      currentFormInitialValues.birthDate = dayjs(date.target.value, &#39;DD/MM/YYYY&#39;);
  7.                                             
  8.      if(!date.target.value || date.target.value === &#39;&#39;){
  9.         return
  10.      }else{                                              
  11.         form.setFieldsValue(currentFormInitialValues);
  12.      };
  13.  }}/&gt;
  14. &lt;/Form.Item&gt;

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

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

  1. const dateFormatList = [
  2.   'DD/MM/YYYY',
  3.   'DD/MM/YY',
  4.   'DD-MM-YYYY',
  5.   'DD-MM-YY',
  6.   'DDMMYYYY',
  7.   'DDMMYY'
  8. ]

然后将其分配给DatePicker格式：

  1. <DatePicker
  2.   mode={'date'}
  3.   format={dateFormatList}
  4. />

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

英文:

Just create an array of accepted date formats

  1. const dateFormatList = [
  2.   &#39;DD/MM/YYYY&#39;,
  3.   &#39;DD/MM/YY&#39;,
  4.   &#39;DD-MM-YYYY&#39;,
  5.   &#39;DD-MM-YY&#39;,
  6.   &#39;DDMMYYYY&#39;,
  7.   &#39;DDMMYY&#39;
  8. ]

And assign it to DatePicker format:

  1. &lt;DatePicker
  2.   mode={ &#39;date&#39; }
  3.   format={ dateFormatList }
  4. /&gt;

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.

huangapple
  • 本文由 发表于 2023年6月6日 16:05:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76412573.html
  • antd
  • javascript
  • jquery
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定