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

2024-12-04 22:15:10

总体效果：

展开后：

选值后：

代码部分：

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日期控件使用_仅月份的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Ant design vue table 单击行选中勾选checkbox教程

最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传期望:Ant design table 单击行选中勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th
解决ant design vue中树形控件defaultExpandAll设置无效的问题

页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值结果: 设置defaultExpandAll无效,并不能展开所有节点原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe
ant design vue中日期选择框混合时间选择器的用法说明

首先时间格式化用到moment方法,需要在页面中引入moment组件 import moment from 'moment' 结构代码: <a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode.parentNode" format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'pu
Ant Design的Table组件去除

在Ant Design的Table组件文档中,排序有三种状态:点击升序.点击降序.取消排序.一般需求只需要升序和降序,不需要取消排序,这时候就需要我们设置sortOrder来去除取消排序. 首先,我们从官方文档中ctrl+c出一个排序栗子,放在我们的组件中. 官方栗子 import React, { useEffect, useState } from 'react'; import { Table } from 'antd' export default () => { const [data
ant-design-vue 时间选择器赋值默认时间的操作

我就废话不多说了,大家还是直接看代码吧~ <template> <div> <a-range-picker show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码 @change="onChangeTime" ><
Antd的Table组件嵌套Table以及选择框联动操作

一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行也需要选中. 二.Table的rowSelection配置父子Table联动,就不能使用OnChange,需要使用OnSelect以及OnSelectAll手动配置. selectedRowKeys:指定选中项的key数组 OnSelect:手动选择/取消选择某行的回调 OnSelect(reco
基于ant design日期控件使用_仅月份的操作

总体效果: 展开后: 选值后: 代码部分: 1.引入: import { DatePicker } from 'antd'; 2.主体部分: export default class PersonInfo extends Component{ constructor() { super(); //设置状态,存储日期 this.state = { workMode: ['month', 'month'], workValue: [], }; } render(){ //主体引用 const {Ra
ant design 日期格式化的实现

今天写项目的时候用到ant design中的日期组件,但是由于用ant design日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换第一种写法我取得的值是年月如:201806 第二种写法 moment().format('YYYY-MM-DD') 第三种写法 moment(Date.now()).format('YYYY-MM-DD') 获取本地日期的下个月 window.moment().add(1, 'months') 获取当前日
jQuery带时间的日期控件代码分享

本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h
基于C#调用OCX控件的常用方法(推荐)

小伙伴们在使用ICP提供的各种能力进行集成开发时常常会遇到一些技术上的困扰,例如ICP中很多接口是通过OCX控件的方式提供的,如何调用这些接口,就成了一个不大不小的问题,毕竟开发指南上可没这些内容啊~别着急,今天我就给大家介绍一下C#中调用OCX接口的常用方法.^_^y 开发环境:win7企业版,vs2010 控件:以voice.ocx为例一.Winform工程中调用OCX控件 1.使用regsvr32控制台命令注册控件: 1.1 打开控制台,进入控件存放路径 1.2 输入控制台命令:regs
JS日期控件My97DatePicker基本用法

My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包下载地址:https://www.jb51.net/jiaoben/18012.html 2.在页面中引入该组件js文件: <script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script> 3.例子 <!DOCTYPE HTM
Angularjs中使用layDate日期控件示例

layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指
ASP.NET Calendar日历(日期)控件使用方法

Calendar 控件显示一个日历,用户可通过该日历导航到任意一年的任意一天.当 ASP.NET 网页运行时,Calendar 控件以 HTML 表格的形式呈现.因此,该控件的许多属性与多种不同的表格格式相符.在这些属性中,有几个在一些低版本的浏览器中不能得到完全支持,因此在这些浏览器中并不能使用所有的格式功能. 使用 Calendar 控件在网页上显示日历的单个月.该控件使您可以选择日期并移到下个月或上个月.Calendar 控件支持 System.Globalization 命名空间中的所有
ASP.NET使用My97DatePicker日期控件实例

.Net中默认提供了Calendar日期控件,但是它有一个缺陷,就是每次日历的显示,隐藏和用户的的选择日期都会造成回传. 在网上找到My97DatePicker这个js日期控件,不错,和大家分享一下. My97DatePicker日期控件在网上很多都可以免费下载,也有该控件的网站把下载好的My97DatePicker.jar解压,黏贴到项目根目录下,当然这个位置大家可以自己设置我在根目录下新建了一个test.aspx页面源代码: <%@ Page Language="C#&qu
ASP.NET My97DatePicker日期控件实现OA日期记事功能

My97DatePicker日期控件是一个非常好用的日期控件,功能非常优秀的日期控件. 对实现页面刷新完善的很好,用日期控件时可以有比较好的享受,这次的OA日期记事功能也得益于此控件,具体效果图如下: 部分代码: Default页布局一个Calendar日期控件 <div> <asp:Calendar ID="Calendar1" runat="server" Width="100%" ShowGridLines="T
一个简单横向javascript日期控件

具体要求就是: 1.日期表格横向占满页面. 2.每个月的日期列表横向显示在一排,而不是像网上的很多日期控件显示一个方块. 3.要求只有年月日可选,选择年或月后自动更新对应日期(这个每个日期控件都有的). 4.默认显示当前年月,高亮当前日期,并显示当前的周次(本年第几周)和星期几. 5.选择某个日期后高亮显示当前日期,并自动更新周次和星期显示. 6.提供接口,可以设定特定日期的显示样式. 6.其他就是一些界面展示的问题了. 想着就是一个日期控件,做着也比较简单,不过比较特别是横向的,第一次听说这种

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

相关推荐

随机推荐