基于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函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 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
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
React组件生命周期详解
2017/07/03 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
常用python编程模板汇总
2016/02/12 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
内勤主管岗位职责
2014/04/03 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
表扬稿格式范文
2015/01/16 职场文书
与死神共舞观后感
2015/06/15 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers