基于ant design日期控件使用_仅月份的操作


Posted in Javascript onOctober 27, 2020

总体效果:

基于ant design日期控件使用_仅月份的操作

展开后:

基于ant design日期控件使用_仅月份的操作

选值后:

基于ant design日期控件使用_仅月份的操作

代码部分:

1、引入:

import { DatePicker } from 'antd';

2、主体部分:

export default class PersonInfo extends Component{
  constructor() {
  super();
 //设置状态,存储日期
   this.state = {
      workMode: ['month', 'month'], 
      workValue: [], 
    };
  }
  render(){
    //主体引用
 const {RangePicker} = DatePicker;
 return(
      <RangePicker
        placeholder={['开始日期', '结束日期']}
        format="YYYY-MM"
        value={this.state.workValue}
        mode={this.state.workMode}
        onPanelChange={this.workHandlePanelChange}
       onChange={this.workOnChange}
      />

函数:

//日期面板时间值改变事件
workHandlePanelChange = (value, mode) => {
    this.setState({
      workValue:value,
      workMode: [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1],
      ],
    });
  }
  //日期清空时触发
  workOnChange = () => {
    this.setState({
      workMode: ['month', 'month'],
      workValue: [],
    })
  }

获取日期值:

//其中this.state.workValue的两个值都是毫秒,formatDate为自写的转换函数
let workYearBegin = this.formatDate(this.state.workValue[0]);
let workYearEnd = this.formatDate(this.state.workValue[1]);
formatDate = (time) => {
    if(!time){
      return '';
    }
    let date = new Date(time);//毫秒转换成日期
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2,'0');//月份不足两位数在前面补0
    return year + '-' + month;//格式控制
  }

补充知识:eact使用ant时设置DatePicker日期控件中文显示

方式一:局部设置

import 'moment/locale/zh-cn';
import locale from 'antd/lib/date-picker/locale/zh_CN';

//调用时引用locale
<DatePicker
  format="YYYY-MM-DD"
  placeholder=""
  locale={locale}
/>

方式二:全局设置

import moment from 'moment'; 
import 'moment/locale/zh-cn'; 
moment.locale('zh-cn');

其实官方文档上面都有,还是要多看文档

Ant Design:https://ant.design/index-cn

以上这篇基于ant design日期控件使用_仅月份的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript this 的一些学习总结
Aug 02 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 #Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 #Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 #Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
Python深入学习之装饰器
2014/08/31 Python
python中元类用法实例
2014/10/10 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python切割图片的示例
2020/11/12 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
数控技术学生的自我评价
2014/02/15 职场文书
教师师德反思材料
2014/02/15 职场文书
国培远程培训感言
2014/03/08 职场文书
电话客服工作职责
2014/07/27 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫