react react-native 日期插件 m-date-picker / rmc-date-picker的使用
m-date-picker 基于 React,提供了 iOS 风格的日期选择方式,与原生 Datepicker 非常相似。
主页: https://github.com/react-component/m-date-picker
Demo: http://react-component.github.io/m-date-picker/examples/popup.html
推荐: ★★★★★
优点: 使用流畅,与原生 Datepicker 非常相似;功能强大,能满足一般需求
不足: 暂无
------------------
官方给的demo 是基于源码内部引用的,与我们实际npm i 以后集成使用有差别的, 现提供实际引用的代码
npm i rmc-date-picker --s
基于rmc-date-picker@6.0. 示例
import 'rmc-picker/assets/index.css';
import 'rmc-date-picker/assets/index.css';
import 'rmc-picker/assets/popup.css';
import zh_CN from 'rmc-date-picker/lib/locale/zh_CN';
import DatePicker from 'rmc-date-picker/lib/DatePicker';
import PopPicker from 'rmc-date-picker/lib/Popup'; class Demo extends React.Component{
constructor(props) {
super(props);
this.state = {
date: null,
};
} onChange = (date) => {
console.log('onChange', this.format(date));
this.setState({
date,
});
} format=(date)=>{
let mday = date.getDate();
let month = date.getMonth() + ;
month = month < ? `${month}` : month;
mday = mday < ? `${mday}` : mday;
return `${date.getFullYear()}-${month}-${mday} ${date.getHours()}:${date.getMinutes()}`;
} onDismiss = () => {
console.log('onDismiss');
} render() {
const { date } = this.state;
const datePicker = (
<DatePicker
rootNativeProps={{'data-xx': 'yy'}}
minDate={new Date(, , , , , )}
maxDate={new Date(, , , , , )}
defaultDate={new Date()}
mode={'date'}
locale={zh_CN}
/>
);
return <div style={{ margin: '10px 30px' }}>
<h2>popup date picker</h2>
<div>
<PopPicker
datePicker={datePicker}
transitionName="rmc-picker-popup-slide-fade"
maskTransitionName="rmc-picker-popup-fade"
title={'选择日期'}
date={date}
okText={'确认'}
dismissText={'取消'}
onDismiss={this.onDismiss}
onChange={this.onChange}>
<p>点我</p>
//触发弹框显示 只需在此处放任意标签即可
</PopPicker>
</div>
</div>;
}
}
--------------------- 原文:https://blog.csdn.net/u012982629/article/details/80752409?
Screenshots
web
API
DatePicker props
react react-native 日期插件 m-date-picker / rmc-date-picker的使用的更多相关文章
- react native-调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错
调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- 在react里面使用jquery插件
在react里面使用jquery插件 背景: 虽然现在react,vue等框架开启了前端开发的新篇章, 但对于一些比较复杂的页面,比如想在项目里面生成 组织架构图,人员汇报关系等还是需要用到之前的 j ...
- date.plugin.js 日期插件
//定义命名空间 var DatePlugin; if (!DatePlugin) DatePlugin = {}; /*整理时间:2015-05-28*/ var defaultFormat = & ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- boostrap 日期插件(带中文显示)
不知道大家用什么样的日期插件,我最近用了bootstrap插件,整理了下,分享给大家,第四部分是我找的插件源码,可以省去大家的找的时间,按1-3的步骤用就好了,有些样式上的小问题就自己调一调: (1) ...
- 求大神帮解答calendar日期插件的问题
小颖最近公司的项目里用了一款日期插件 calendar.js 但是在用的过程中遇到了难题,就是当日期只需要选择具体的月份就可以了,不需要再选具体日期时,小颖解决不了,只能让它默认显示出月份,但是月 ...
随机推荐
- RBMQ发布和订阅消息
RBMQ发布和订阅消息 exchange 参考翻译自: RabbitMQ官网 生产者并非将消息直接发送到queue,而是发送到exchange中,具体将消息发送到特定的队列还是多个队列,或者是丢弃,取 ...
- ThreadLocal之我所见
网上有很多关于ThreadLocal的文章,大部分都提到了多线程之间共享资源的问题.其实ThreadLocal和多线程之间一点关系都没有.如果有,我怕是它的名字改成ThreadShare是不是更合适呢 ...
- 转载:Shell 脚本加密 - 略有修改
shc是一个加密shell脚本的工具.它的作用是把shell脚本转换为一个可执行的二进制文件. shc 安装 yum -y install shc 如果yum不能安装,请移步官方下载rpm包 http ...
- logging 使用的一些问题
python 脚本加载是递归加载,被引用的脚本要先与调用者脚本加载,所以不能在函数外部获取logger,否则会导致配置被错过
- session和cookie的区别是什么,他们都是什么.
Session是存储在服务器端的,Cookie是存储在客户端的. Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息.如何识别特定的客户呢?cookie就可以做到.每次HTTP请求时, ...
- 输入一个字母,是元音字母,则输出时元音字母*,否则,输出为辅音字母 (元音字母有:a,e,i,o,u)
import java.util.Scanner; public class test4 { public static void main(String[] args) { // TODO Auto ...
- CSS3-1
css3 1 学习前置条件:html + css2 2 概述 *历史 css3 就是层叠样式表的目前的最高版本,带来了许多新特性.如,圆角.渐变.过渡.动画.新布局(多列布局缩进盒子等) // c ...
- rabbitmq 日志存储路径
Linux 下/var /log/rabbitmq/ windows下C:\Users\Administrator\AppData\Roaming\RabbitMQ\log
- select、poll、epoll的区别
本文写于2017-02-26,从老账号迁移到本账号,原文地址:https://www.cnblogs.com/huangweiyang/p/6444746.html select.poll.epoll ...
- Eclipse控制台输出log日志中文乱码
今天在工作中,调试程序的时候突然发现控制台的log日志,输出的中文全都是乱码. 看到这就在想,这是项目编码还是log.xml编码配置被改掉了呢?于是统统检查了一遍发现所有的编码格式都是统一用的utf- ...