@rushowl/react-native-single-date-picker
Version:
React Mobile DatePicker Component for web and react-native
531 lines (495 loc) • 19.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _MultiPicker = require('rmc-picker/lib/MultiPicker');
var _MultiPicker2 = _interopRequireDefault(_MultiPicker);
var _Picker = require('rmc-picker/lib/Picker');
var _Picker2 = _interopRequireDefault(_Picker);
var _en_US = require('./locale/en_US');
var _en_US2 = _interopRequireDefault(_en_US);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function getDaysInMonth(date) {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
}
function pad(n) {
return n < 10 ? '0' + n : n + '';
}
function cloneDate(date) {
return new Date(+date);
}
function setMonth(date, month) {
date.setDate(Math.min(date.getDate(), getDaysInMonth(new Date(date.getFullYear(), month))));
date.setMonth(month);
}
var DATETIME = 'datetime';
var DATE = 'date';
var TIME = 'time';
var MONTH = 'month';
var YEAR = 'year';
var ONE_DAY = 24 * 60 * 60 * 1000;
var DatePicker = function (_React$Component) {
(0, _inherits3['default'])(DatePicker, _React$Component);
function DatePicker() {
(0, _classCallCheck3['default'])(this, DatePicker);
var _this = (0, _possibleConstructorReturn3['default'])(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).apply(this, arguments));
_this.state = {
date: _this.props.date || _this.props.defaultDate
};
_this.getNewDate = function (values, index) {
var value = parseInt(values[index], 10);
var props = _this.props;
var mode = props.mode;
var newValue = cloneDate(_this.getDate());
if (mode === DATETIME) {
switch (index) {
case 0:
var newDate = new Date(value);
newValue = new Date(newDate.getTime());
break;
case 1:
_this.setHours(newValue, value);
break;
case 2:
newValue.setMinutes(value);
break;
case 3:
_this.setAmPm(newValue, value);
break;
default:
break;
}
} else if (mode === DATE || mode === YEAR || mode === MONTH) {
switch (index) {
case 0:
newValue.setFullYear(value);
break;
case 1:
// Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth
// e.g. from 2017-03-31 to 2017-02-28
setMonth(newValue, value);
break;
case 2:
newValue.setDate(value);
break;
case 3:
_this.setHours(newValue, value);
break;
case 4:
newValue.setMinutes(value);
break;
case 5:
_this.setAmPm(newValue, value);
break;
default:
break;
}
} else if (mode === TIME) {
switch (index) {
case 0:
_this.setHours(newValue, value);
break;
case 1:
newValue.setMinutes(value);
break;
case 2:
_this.setAmPm(newValue, value);
break;
default:
break;
}
}
return _this.clipDate(newValue);
};
_this.onValueChange = function (values, index) {
var props = _this.props;
var newValue = _this.getNewDate(values, index);
if (!('date' in props)) {
_this.setState({
date: newValue
});
}
if (props.onDateChange) {
props.onDateChange(newValue);
}
if (props.onValueChange) {
props.onValueChange(values, index);
}
};
_this.onScrollChange = function (values, index) {
var props = _this.props;
if (props.onScrollChange) {
var newValue = _this.getNewDate(values, index);
props.onScrollChange(newValue, values, index);
}
};
return _this;
}
(0, _createClass3['default'])(DatePicker, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if ('date' in nextProps) {
this.setState({
date: nextProps.date || nextProps.defaultDate
});
}
}
}, {
key: 'setHours',
value: function setHours(date, hour) {
if (this.props.use12Hours) {
var dh = date.getHours();
var nhour = hour;
nhour = dh >= 12 ? hour + 12 : hour;
nhour = nhour >= 24 ? 0 : nhour; // Make sure no more than one day
date.setHours(nhour);
} else {
date.setHours(hour);
}
}
}, {
key: 'setAmPm',
value: function setAmPm(date, index) {
if (index === 0) {
date.setTime(+date - ONE_DAY / 2);
} else {
date.setTime(+date + ONE_DAY / 2);
}
}
}, {
key: 'getDefaultMinDate',
value: function getDefaultMinDate() {
if (!this.defaultMinDate) {
this.defaultMinDate = new Date(2000, 1, 1, 0, 0, 0);
}
return this.defaultMinDate;
}
}, {
key: 'getDefaultMaxDate',
value: function getDefaultMaxDate() {
if (!this.defaultMaxDate) {
this.defaultMaxDate = new Date(2030, 1, 1, 23, 59, 59);
}
return this.defaultMaxDate;
}
}, {
key: 'getDate',
value: function getDate() {
return this.clipDate(this.state.date || this.getDefaultMinDate());
}
// used by rmc-picker/lib/PopupMixin.js
}, {
key: 'getValue',
value: function getValue() {
return this.getDate();
}
}, {
key: 'getMinYear',
value: function getMinYear() {
return this.getMinDate().getFullYear();
}
}, {
key: 'getMaxYear',
value: function getMaxYear() {
return this.getMaxDate().getFullYear();
}
}, {
key: 'getMinMonth',
value: function getMinMonth() {
return this.getMinDate().getMonth();
}
}, {
key: 'getMaxMonth',
value: function getMaxMonth() {
return this.getMaxDate().getMonth();
}
}, {
key: 'getMinDay',
value: function getMinDay() {
return this.getMinDate().getDate();
}
}, {
key: 'getMaxDay',
value: function getMaxDay() {
return this.getMaxDate().getDate();
}
}, {
key: 'getMinHour',
value: function getMinHour() {
return this.getMinDate().getHours();
}
}, {
key: 'getMaxHour',
value: function getMaxHour() {
return this.getMaxDate().getHours();
}
}, {
key: 'getMinMinute',
value: function getMinMinute() {
return this.getMinDate().getMinutes();
}
}, {
key: 'getMaxMinute',
value: function getMaxMinute() {
return this.getMaxDate().getMinutes();
}
}, {
key: 'getMinDate',
value: function getMinDate() {
return this.props.minDate || this.getDefaultMinDate();
}
}, {
key: 'getMaxDate',
value: function getMaxDate() {
return this.props.maxDate || this.getDefaultMaxDate();
}
}, {
key: 'getDateData',
value: function getDateData() {
var formatMonth = this.props.formatMonth;
var days = [];
if (this.getMinDate().getTime() > this.getMaxDate().getTime()) {
return [{ key: 'day', props: { children: days } }];
}
var minDate = new Date(this.getMinDate().getTime());
minDate.setHours(0, 0, 0, 0);
var minTimestamp = minDate.getTime();
var maxTimestamp = this.getMaxDate().getTime();
for (var i = minTimestamp; i <= maxTimestamp; i += 86400000) {
var dt = new Date(i);
var label = formatMonth ? formatMonth(i, dt) : dt.toString();
days.push({
value: i + '',
label: label
});
}
return [{ key: 'day', props: { children: days } }];
}
}, {
key: 'getDisplayHour',
value: function getDisplayHour(rawHour) {
// 12 hour am (midnight 00:00) -> 12 hour pm (noon 12:00) -> 12 hour am (midnight 00:00)
if (this.props.use12Hours) {
if (rawHour === 0) {
rawHour = 12;
}
if (rawHour > 12) {
rawHour -= 12;
}
return rawHour;
}
return rawHour;
}
}, {
key: 'getTimeData',
value: function getTimeData(date) {
var _props = this.props,
_props$minHour = _props.minHour,
minHour = _props$minHour === undefined ? 0 : _props$minHour,
_props$maxHour = _props.maxHour,
maxHour = _props$maxHour === undefined ? 23 : _props$maxHour,
_props$minMinute = _props.minMinute,
minMinute = _props$minMinute === undefined ? 0 : _props$minMinute,
_props$maxMinute = _props.maxMinute,
maxMinute = _props$maxMinute === undefined ? 59 : _props$maxMinute;
var _props2 = this.props,
mode = _props2.mode,
locale = _props2.locale,
minuteStep = _props2.minuteStep,
use12Hours = _props2.use12Hours;
var minDateMinute = this.getMinMinute();
var maxDateMinute = this.getMaxMinute();
var minDateHour = this.getMinHour();
var maxDateHour = this.getMaxHour();
var hour = date.getHours();
var isNext12Hours = false;
if (use12Hours && hour >= 12) {
isNext12Hours = true;
}
if (mode === DATETIME) {
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var minDateYear = this.getMinYear();
var maxDateYear = this.getMaxYear();
var minDateMonth = this.getMinMonth();
var maxDateMonth = this.getMaxMonth();
var minDateDay = this.getMinDay();
var maxDateDay = this.getMaxDay();
if (minDateYear === year && minDateMonth === month && minDateDay === day) {
minHour = minDateHour;
if (minDateHour === hour) {
minMinute = minDateMinute;
}
}
if (maxDateYear === year && maxDateMonth === month && maxDateDay === day) {
maxHour = maxDateHour;
if (maxDateHour === hour) {
maxMinute = maxDateMinute;
}
}
} else {
minHour = minDateHour;
if (minDateHour === hour) {
minMinute = minDateMinute;
}
maxHour = maxDateHour;
if (maxDateHour === hour) {
maxMinute = maxDateMinute;
}
}
var hours = [];
if (minHour === 0 && maxHour === 0 || minHour !== 0 && maxHour !== 0) {
minHour = this.getDisplayHour(minHour);
}
if (isNext12Hours) {
minHour = Math.min(minHour, 0);
}
if ((minHour === 0 || minHour === 12) && use12Hours) {
minHour = 1;
hours.push({ value: '0', label: locale.hour ? '12' + locale.hour : '12' });
}
maxHour = this.getDisplayHour(maxHour);
for (var i = minHour; i <= maxHour; i++) {
hours.push({
value: i + '',
label: locale.hour ? i + locale.hour + '' : pad(i)
});
}
var minutes = [];
var selMinute = date.getMinutes();
for (var _i = minMinute; _i <= maxMinute; _i += minuteStep) {
minutes.push({
value: _i + '',
label: locale.minute ? _i + locale.minute + '' : pad(_i)
});
if (selMinute > _i && selMinute < _i + minuteStep) {
minutes.push({
value: selMinute + '',
label: locale.minute ? selMinute + locale.minute + '' : pad(selMinute)
});
}
}
var cols = [{ key: 'hours', props: { children: hours } }, { key: 'minutes', props: { children: minutes } }].concat(use12Hours ? [{
key: 'ampm',
props: { children: [{ value: '0', label: locale.am }, { value: '1', label: locale.pm }] }
}] : []);
return { cols: cols, selMinute: selMinute };
}
}, {
key: 'clipDate',
value: function clipDate(date) {
var mode = this.props.mode;
var minDate = this.getMinDate();
var maxDate = this.getMaxDate();
if (mode === DATETIME) {
if (date < minDate) {
return cloneDate(minDate);
}
if (date > maxDate) {
return cloneDate(maxDate);
}
} else if (mode === DATE || mode === YEAR || mode === MONTH) {
// compare-two-dates: https://stackoverflow.com/a/14629978/2190503
if (+date + ONE_DAY <= minDate) {
return cloneDate(minDate);
}
if (date >= +maxDate + ONE_DAY) {
return cloneDate(maxDate);
}
} else if (mode === TIME) {
var maxHour = maxDate.getHours();
var maxMinutes = maxDate.getMinutes();
var minHour = minDate.getHours();
var minMinutes = minDate.getMinutes();
var hour = date.getHours();
var minutes = date.getMinutes();
if (hour < minHour || hour === minHour && minutes < minMinutes) {
return cloneDate(minDate);
}
if (hour > maxHour || hour === maxHour && minutes > maxMinutes) {
return cloneDate(maxDate);
}
}
return date;
}
}, {
key: 'getValueCols',
value: function getValueCols() {
var _props3 = this.props,
mode = _props3.mode,
use12Hours = _props3.use12Hours;
var date = this.getDate();
var cols = [];
var value = [];
if (mode === DATETIME) {
cols = this.getDateData();
var zeroHourDate = new Date(date.getTime());
zeroHourDate.setHours(0, 0, 0, 0);
value = [zeroHourDate.getTime() + ''];
}
if (mode === DATETIME || mode === TIME) {
var time = this.getTimeData(date);
cols = cols.concat(time.cols);
var hour = date.getHours();
var dtValue = [hour + '', time.selMinute + ''];
var nhour = hour;
if (use12Hours) {
nhour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
dtValue = [nhour + '', time.selMinute + '', (hour >= 12 ? 1 : 0) + ''];
}
value = value.concat(dtValue);
}
return {
value: value,
cols: cols
};
}
}, {
key: 'render',
value: function render() {
var _getValueCols = this.getValueCols(),
value = _getValueCols.value,
cols = _getValueCols.cols;
var _props4 = this.props,
disabled = _props4.disabled,
pickerPrefixCls = _props4.pickerPrefixCls,
prefixCls = _props4.prefixCls,
rootNativeProps = _props4.rootNativeProps,
className = _props4.className,
style = _props4.style,
itemStyle = _props4.itemStyle;
var multiStyle = (0, _extends3['default'])({ flexDirection: 'row', alignItems: 'center' }, style);
return _react2['default'].createElement(_MultiPicker2['default'], { style: multiStyle, rootNativeProps: rootNativeProps, className: className, prefixCls: prefixCls, selectedValue: value, onValueChange: this.onValueChange, onScrollChange: this.onScrollChange }, cols.map(function (p) {
return _react2['default'].createElement(_Picker2['default'], { style: { flex: 1 }, key: p.key, disabled: disabled, prefixCls: pickerPrefixCls, itemStyle: itemStyle }, p.props.children.map(function (item) {
return _react2['default'].createElement(_Picker2['default'].Item, { key: item.value, value: item.value }, item.label);
}));
}));
}
}]);
return DatePicker;
}(_react2['default'].Component);
DatePicker.defaultProps = {
prefixCls: 'rmc-date-picker',
pickerPrefixCls: 'rmc-picker',
locale: _en_US2['default'],
mode: DATE,
disabled: false,
minuteStep: 1,
onDateChange: function onDateChange() {},
use12Hours: false
};
exports['default'] = DatePicker;
module.exports = exports['default'];