Antd日期选择框中文【最新版本，亲测有效】

分手后的思念是犯贱 2022-02-21 08:44 1058阅读 0赞

**不得不说Antd的确蛮好用的，但是还是要吐槽，遇到一点问题百度基本上解决不了，而且文档写的也的确不怎么样**  
**就这个日期选择器，默认竟然不支持中文？？？而且百度了半天都是什么鬼？？？**

##### 这是默认效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

##### 这是之后的效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

#### 第一步：根据官方文档导入下面的代码（你可以放在使用日期选择框的界面也可以放在main.js里面） ####

// import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
    import moment from 'moment';
    import 'moment/locale/zh-cn';
    moment.locale('zh-cn');

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]

**当你再次刷新页面的时候以为没问题了，但是你看到了什么？WTFK**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]

#### 第二步：对上一步进行一个改善 ####

###### 2-1：在你使用日期选择器的页面加入下面的这个变量（变量名随意，我就叫 locale） ######

locale:{          
            	"lang": {            
            		"placeholder": "请选择日期",            
            		"today": "今天",            
            		"yearFormat": "YYYY",            
            		"dateFormat": "M/D/YYYY",            
            		"dayFormat": "D",            
            		"dateTimeFormat": "M/D/YYYY HH:mm:ss",            
            		"monthFormat": "MMMM"       
            		}
            	}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]

###### 2-2：在你的日期选择框上加上这句代码 :locale=locale ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5]

###### 2-3：最终效果 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 6]

### 更多配置看这里 ###

locale:{       
            	 "lang": {         
            	  "placeholder": "请选择日期",          
            	  "rangePlaceholder": ["Start date", "End date"],         
            	  "today": "今天",          
            	  "now": "Now",         
            	  "backToToday": "Back to today",          
            	  "ok": "Ok",          
            	  "clear": "Clear",          
            	  "month": "Month",          
            	  "year": "Year",          
            	  "timeSelect": "Select time",          
            	  "dateSelect": "Select date",          
            	  "monthSelect": "Choose a month",          
            	  "yearSelect": "Choose a year",          
            	  "decadeSelect": "Choose a decade",          
            	  "yearFormat": "YYYY",          
            	  "dateFormat": "M/D/YYYY",          
            	  "dayFormat": "D",          
            	  "dateTimeFormat": "M/D/YYYY HH:mm:ss",          
            	  "monthFormat": "MMMM",          
            	  "monthBeforeYear": true,          
            	  "previousMonth": "Previous month (PageUp)",          
            	  "nextMonth": "Next month (PageDown)",          
            	  "previousYear": "Last year (Control + left)",          
            	  "nextYear": "Next year (Control + right)",          
            	  "previousDecade": "Last decade",          
            	  "nextDecade": "Next decade",          
            	  "previousCentury": "Last century",          
            	  "nextCentury": "Next century"        
            	  },        
            	  "timePickerLocale": {          
            	  	"placeholder": "Select time"        
            	  }      
            	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220221/98e2435ed5744e9481b560217bee18c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20220221/284bbb1d07914fd296c52f7c45a5051d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20220221/74fd6a833be6467f86c70232f0912d54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20220221/b851da065d83431d9923587d0a36a611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 4]: /images/20220221/8a9ba8f24c384ae292050631ac73304b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 5]: /images/20220221/e45081f1697b47da91ecc3246d0cf31a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 6]: /images/20220221/e75eb33c7029496ab4b1448e464bd0b6.png