基于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 函数对象的多重身份
Jun 28 Javascript
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue 数据操作相关总结
Dec 17 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python lxml模块安装教程
2015/06/02 Python
python编码最佳实践之总结
2016/02/14 Python
回调函数的意义以及python实现实例
2017/06/20 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python如何安装第三方模块
2020/05/28 Python
Python while true实现爬虫定时任务
2020/06/08 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
毕业生自荐书模版
2014/01/04 职场文书
商场中秋节广播稿
2014/01/17 职场文书
体育运动口号
2014/06/09 职场文书
违反交通法规检讨书
2014/09/10 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
MYSQL常用函数介绍
2022/05/05 MySQL
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS