基于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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
js new Date()实例测试
Oct 31 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
js正则表达式简单校验方法
Jan 03 Javascript
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
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
Java中final关键字详解
2015/08/10 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
php实现websocket实时消息推送
2018/03/30 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python list的index()和find()的实现
2020/11/16 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
python 如何在测试中使用 Mock
2021/03/01 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
京剧自荐信
2014/01/26 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers