Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-mobile-datepicker

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-mobile-datepicker - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

dist/react-mobile-datepicker.js
dist/react-mobile-datepicker.js.map
dist/react-mobile-datepicker.min.js
dist/react-mobile-datepicker.min.js.map
lib/Modal.js
rollup.config.js

6

CHANGELOG.md

@@ -0,1 +1,7 @@

v2.0.5 - Sat, 10 Sep 2016 10:16:55 GMT
--------------------------------------
- [9e2df2f](../../commit/9e2df2f) [changed] add modal layer and add rollup for production
v2.0.4 - Tue, 12 Jul 2016 09:16:42 GMT

@@ -2,0 +8,0 @@ --------------------------------------

17

lib/DatePicker.js

@@ -34,9 +34,2 @@ /**

shouldComponentUpdate(nextProps, nextState) {
return nextState.date.timestamp !== this.state.date.timestamp ||
nextProps.date !== this.props.date ||
nextProps.minDate !== this.props.minDate ||
nextProps.maxDate !== this.props.maxDate;
}
_productDate(date) {

@@ -132,13 +125,3 @@ const nDate = nextDate(date, 0);

DatePicker.defaultProps = {
touchLen: 40,
dateColor: '#fff',
btnColor: '#fff',
layerBackground: '#ffa70b',
date: new Date(),
minDate: new Date(1970, 0, 1),
maxDate: new Date(2050, 0, 1),
onSelect: () => {},
};
export default DatePicker;

14

lib/DatePickerItem.js

@@ -209,6 +209,6 @@

DatePickerItem.propTypes = {
date: PropTypes.object.isRequired,
minDate: PropTypes.object.isRequired,
maxDate: PropTypes.object.isRequired,
typeName: PropTypes.string.isRequired,
date: PropTypes.object,
minDate: PropTypes.object,
maxDate: PropTypes.object,
typeName: PropTypes.string,
touchLen: PropTypes.number,

@@ -219,8 +219,2 @@ dateColor: PropTypes.string,

DatePickerItem.defaultProps = {
dateColor: '#fff',
touchLen: 40,
onSelect: () => {},
};
export default DatePickerItem;

49

lib/index.js
import './index.css';
import React, { PropTypes } from 'react';
import DatePicker from './DatePicker.js';
export default DatePicker;
import Modal from './Modal.js';
function EnhanceDatePicker({ isOpen, ...props }) {
return (
<div
style={{ display: isOpen ? '' : 'none' }}
className="datepicker-modal">
<DatePicker {...props} />
</div>
);
}
function ModalDatePicker(props) {
return (
<Modal {...props}>
<EnhanceDatePicker />
</Modal>
);
}
ModalDatePicker.propTypes = {
isOpen: PropTypes.bool,
touchLen: PropTypes.number,
btnColor: PropTypes.string,
dateColor: PropTypes.string,
layerBackground: PropTypes.string,
date: PropTypes.object,
minDate: PropTypes.object,
maxDate: PropTypes.object,
onSelect: PropTypes.func,
};
ModalDatePicker.defaultProps = {
touchLen: 40,
dateColor: '#fff',
btnColor: '#fff',
layerBackground: '#ffa70b',
isOpen: false,
date: new Date(),
minDate: new Date(1970, 0, 1),
maxDate: new Date(2050, 0, 1),
onSelect: () => {},
};
export default ModalDatePicker;

2

lib/time.js

@@ -5,3 +5,3 @@ /**

function convertDate(date, formate) {
export function convertDate(date, formate) {
const year = date.getFullYear();

@@ -8,0 +8,0 @@ const month = date.getMonth() + 1;

32

package.json
{
"name": "react-mobile-datepicker",
"version": "2.0.4",
"version": "2.0.5",
"description": "一个移动端时间选择器react组件",
"main": "./dist/mobile-datepicker.js",
"main": "./dist/react-mobile-datepicker.js",
"amdName": "reactMobileDatePicker",
"minified:main": "dist/react-mobile-datepicker.min.js",
"repository": "lanjingling0510/react-mobile-datepicker",

@@ -18,3 +20,7 @@ "homepage": "https://github.com/lanjingling0510/react-mobile-datepicker#readme",

"scripts": {
"build": "webpack",
"clean": "rm -rf dist/",
"build": "npm-run-all clean transpile minify size",
"transpile": "rollup -c rollup.config.js -m ${npm_package_main}.map -f umd -n $npm_package_amdName -o $npm_package_main",
"minify": "uglifyjs $npm_package_main -cm -o $npm_package_minified_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_minified_main}.map",
"size": "size=$(gzip-size $npm_package_minified_main | pretty-bytes) && echo \"gzip size: $size\"",
"start": "webpack-dev-server",

@@ -35,2 +41,3 @@ "release": "scripts/release",

"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-minimal-rollup": "^2.0.0",
"babel-preset-react": "^6.5.0",

@@ -49,5 +56,7 @@ "babel-preset-stage-0": "^6.5.0",

"extract-text-webpack-plugin": "^1.0.1",
"gzip-size-cli": "^1.0.0",
"html-webpack-plugin": "^2.21.0",
"mocha": "2.3.3",
"mocha-lcov-reporter": "^1.2.0",
"npm-run-all": "^3.0.0",
"nyc": "^6.6.1",

@@ -58,17 +67,20 @@ "postcss": "^5.0.21",

"postcss-nested": "^1.0.0",
"pretty-bytes-cli": "^2.0.0",
"react": "^15.2.0",
"react-addons-perf": "^15.2.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.2.0",
"rf-release": "^0.4.0",
"rollup": "^0.34.13",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-json": "^2.0.1",
"rollup-plugin-memory": "^2.0.0",
"rollup-plugin-postcss": "^0.2.0",
"sinon": "^1.17.4",
"style-loader": "^0.13.1",
"uglify-js": "^2.7.3",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.12.0",
"react": "^15.2.0",
"react-dom": "^15.2.0"
"webpack-dev-server": "^1.14.1"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0"
},
"license": "ISC"
}

109

README.md
# react-mobile-datepicker
[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
一个移动端时间选择器react组件
---------------------------------------
**a lightweight react date picker for mobile, Not more than 4k**
react-mobile-datepicker provides a component that can set year, month and day by sliding up or down.
<div style="padding:30px">

@@ -13,4 +17,7 @@ <img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/preview.gif" width="300" />

安装
------------
## Getting Started
### Install
Using [npm](https://www.npmjs.com/):

@@ -20,61 +27,80 @@

### Import what you need
The following guide assumes you have some sort of ES2015 build set up using babel and/or webpack/browserify/gulp/grunt/etc.
然后，使用模块加载工具流，支持common.js或ES2015模块,例如[webpack](https://github.com/webpack/webpack)
```js
// Using an ES6 transpiler like Babel
import React from 'react';
import ReactDOM from 'react-dom';
import DatePicker from 'react-mobile-datepicker';
import 'react-mobile-datepicker/dist/mobile-datepicker.css'; // Make sure to import the default stylesheet
// Not using an ES6 transpiler
var DatePicker = require('react-mobile-datepicker');
require('react-mobile-datepicker/dist/mobile-datepicker.css');
```
使用
------------
### 例子
### Usage Example
```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import DatePicker from 'mobile-datepicker';
import 'react-mobile-datepicker/dist/mobile-datepicker.css'; // only needs to be imported once
class App extends React.Component {
state = {
time: new Date(),
isOpen: false,
}
// Render the Calendar
var today = new Date();
var minDate = Number(new Date()) - (24*60*60*1000) * 7; // One week before today
handleClick = () => {
this.setState({ isOpen: true });
}
handleSelect = (time) => {
this.setState({ time, isOpen: false });
}
render() {
return (
<div className="App">
<a
className="select-btn"
onClick={this.handleClick}>
select time
</a>
<p className="select-time ">
{convertDate(this.state.time, 'YYYY-MM-DD')}
</p>
render(
<DatePicker
startDate={today}
minDate={minDate}
onSelect={(time) => { console.log(time); }} />,
document.getElementById('root')
);
<DatePicker
date={this.state.time}
isOpen={this.state.isOpen}
onSelect={this.handleSelect} />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('react-box'));
```
Prop Types
------------
## PropTypes
| Property | Type | Default | Description |
|:------------- |:------------- |:-------------- |:---------- |
| btnColor | String | #fff | 完成按钮颜色 |
| dateColor | String | #fff | 日期文字颜色 |
| layerBackground | String | #ffa70b | 背景颜色 |
| date | Date | new Date() | 初始日期 |
| minDate | Date | 前一周 | 最小日期 |
| maxDate | Date | new Date() | 最大日期 |
| onSelect | Function | () => {} | 点击完成后的回调函数, Date对象作为参数 |
| btnColor | String | #fff | done button color |
| dateColor | String | #fff | date of text color |
| layerBackground | String | #ffa70b | background color |
| date | Date | new Date() | date value |
| minDate | Date | new Date(1970, 0, 1) | minimum date |
| maxDate | Date | new Date(2050, 0, 1) | maximum date |
| onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |
Changelog
-------------
## Changelog
* [Changelog](CHANGELOG.md)
v1.0.3 - Thu, 23 Jun 2016 13:22:13 GMT
--------------------------------------
## How to Contribute
- [5a93fe9](../../commit/5a93fe9) [changed] 更新了READEME
Anyone and everyone is welcome to contribute to this project. The best way to
start is by checking our [open issues](https://github.com/lanjingling0510/react-mobile-datepicker/issues),
[submit a new issues](https://github.com/lanjingling0510/react-mobile-datepicker/issues/new?labels=bug) or
[feature request](https://github.com/lanjingling0510/react-mobile-datepicker/issues/new?labels=enhancement),
participate in discussions, upvote or downvote the issues you like or dislike.

@@ -84,3 +110,2 @@

[npm-badge]: https://img.shields.io/npm/v/react-mobile-datepicker.svg?style=flat-square

@@ -87,0 +112,0 @@ [npm]: https://www.npmjs.com/package/react-mobile-datepicker

119

webpack.config.js

@@ -7,5 +7,2 @@

var HtmlWebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var merge = require('webpack-merge');
var config = require('./config.js');

@@ -19,3 +16,18 @@ var postNested = require('postcss-nested');

var common = {
module.exports = {
entry: buildEntries(),
output: {
path: 'examples/__build__',
publicPath: '/',
filename: '[name].js',
chunkFilename: "[name].chunk.min.js"
},
devTool: 'eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
host: '0.0.0.0',
},
resolve: {

@@ -29,2 +41,5 @@ extensions: ['', '.js', '.jsx']

exclude: /node_modules/,
}, {
test: /\.css$/,
loader: 'style!css!postcss'
}]

@@ -41,87 +56,17 @@ },

];
}
},
plugins: [
new HtmlWebpackPlugin({
title: 'lib-temlate',
template: 'examples/index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
]
};
if (TARGET === 'start') {
module.exports = merge(common, {
entry: buildEntries(),
output: {
path: 'examples/__build__',
publicPath: '/',
filename: '[name].js',
chunkFilename: "[name].chunk.min.js"
},
devTool: 'eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
host: '0.0.0.0',
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css!postcss'
}]
},
plugins: [
new HtmlWebpackPlugin({
title: 'lib-temlate',
template: 'examples/index.html', // Load a custom template
inject: 'body' // Inject all scripts into the body
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
]
});
}
if (TARGET === 'build') {
module.exports = merge(common, {
entry: {
[config.name]: './lib/index.js',
[config.name + '.min']: './lib/index.js'
},
output: {
filename: '[name].js',
chunkFilename: '[id].chunk.js',
path: 'dist',
publicPath: '/',
libraryTarget: 'umd',
library: 'DatePicker'
},
externals: [
'react',
'react-dom'
],
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
}]
},
plugins: [
new ExtractTextPlugin('[name].css', {
disable: false,
allChunks: true,
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new UglifyJsPlugin({
include: /\.min\.js$/,
minimize: true,
compress: {
warnings: false
}
})
],
});
}
function buildEntries() {

@@ -128,0 +73,0 @@ return fs.readdirSync(EXAMPLES_DIR).reduce(function (a, b) {

dist/mobile-datepicker.css
dist/mobile-datepicker.js
dist/mobile-datepicker.min.css
dist/mobile-datepicker.min.js
.babelrc

Sorry, the diff of this file is not supported yet

.github/preview.gif

Sorry, the diff of this file is not supported yet

lib/index.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc