react-time-picker - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

dist.config.js

@@ -13,4 +13,3 @@ module.exports = {
     externals: {
-        'react': 'React',
-        'moment': 'moment'
+        'react': 'React'
     },
@@ -17,0 +16,0 @@ resolve: {

dist.min.config.js

@@ -13,4 +13,3 @@ module.exports = {
     externals: {
-        'react': 'React',
-        'moment': 'moment'
+        'react': 'React'
     },
@@ -17,0 +16,0 @@ resolve: {

Gulpfile.js

@@ -1,10 +0,8 @@
-var gulp  = require('gulp');
-var react = require('gulp-react');
+var gulp  = require('gulp')
+var babel = require('gulp-babel')
 
 gulp.task('default', function () {
     return gulp.src('./src/**')
-        .pipe(react({
-            harmony: true
-        }))
-        .pipe(gulp.dest('./lib'));
+        .pipe(babel())
+        .pipe(gulp.dest('./lib'))
 });

index.jsx

@@ -6,6 +6,6 @@ 'use strict';
 
-var VALUE = '14:00:01'
+var VALUE = '03 AM'
 
-var onChange = function(value){
-    // value = value.substring(0, 5)
+var onChange = function(value, m, t){
+	// console.log(value, m,t);
     picker.setProps({value: value})
@@ -16,3 +16,5 @@ }
     <TimePicker
-        value={VALUE}
+    	style={{margin: 20}}
+    	format='H:m:s a'
+        defaultValue={VALUE}
         onChange={onChange}
@@ -19,0 +21,0 @@ />,

lib/format.js

 'use strict';
 
-var twoDigits     = require('./twoDigits')
-var getFormatInfo = require('./getFormatInfo')
+var twoDigits = require('./twoDigits');
+var getFormatInfo = require('./getFormatInfo');
 
-module.exports = function(name, value, formatOrInfo){
+module.exports = function (name, value, formatOrInfo) {
 
-	var formatInfo = formatOrInfo
+	var formatInfo = formatOrInfo;
 
-	if (!formatInfo || !formatInfo.hour || typeof formatInfo == 'string'){
-		formatInfo = getFormatInfo(formatInfo)
+	if (!formatInfo || !formatInfo.hour || typeof formatInfo == 'string') {
+		formatInfo = getFormatInfo(formatInfo);
 	}
 
-	if (!formatInfo){
-		return
+	if (!formatInfo) {
+		return;
 	}
 
-	var info = formatInfo[name]
+	var info = formatInfo[name];
 
-	if (value && name === 'meridian' && info.specified){
-		return info.uppercase? value.toUpperCase(): value.toLowerCase()
+	if (value && name === 'meridian' && info.specified) {
+		return info.uppercase ? value.toUpperCase() : value.toLowerCase();
 	}
 
-	return info.specified?
-				info.len == 2?
-					twoDigits(value):
-					value
-				:
-				''
-}
+	return info.specified ? info.len == 2 ? twoDigits(value) : value : '';
+};

lib/formatTime.js

 'use strict';
 
-var twoDigits      = require('./twoDigits')
-var getFormatInfo  = require('./getFormatInfo')
-var formatFunction = require('./format')
+var twoDigits = require('./twoDigits');
+var getFormatInfo = require('./getFormatInfo');
+var formatFunction = require('./format');
 
-function identity(x){
-	return x
+function identity(x) {
+	return x;
 }
 
-module.exports = function(time, format){
+module.exports = function (time, format) {
 
-	var hourFormat     = twoDigits
-	var minuteFormat   = twoDigits
-	var secondFormat   = twoDigits
-	var meridianFormat = identity
+	var hourFormat = twoDigits;
+	var minuteFormat = twoDigits;
+	var secondFormat = twoDigits;
+	var meridianFormat = identity;
 
-	if (format){
-		var formatInfo = typeof format == 'string'? getFormatInfo(format): format
+	if (format) {
+		var formatInfo = typeof format == 'string' ? getFormatInfo(format) : format;
 
-		if (formatInfo.hour.specified){
-			hourFormat = function(){
-				return formatFunction('hour', time.hour, formatInfo)
-			}
+		if (formatInfo.hour.specified) {
+			hourFormat = function () {
+				return formatFunction('hour', time.hour, formatInfo);
+			};
 		}
 
-		if (formatInfo.minute.specified){
-			minuteFormat = function(){
-				return formatFunction('minute', time.minute, formatInfo)
-			}
+		if (formatInfo.minute.specified) {
+			minuteFormat = function () {
+				return formatFunction('minute', time.minute, formatInfo);
+			};
 		}
 
-		if (formatInfo.second.specified){
-			secondFormat = function(){
-				return formatFunction('second', time.second, formatInfo)
-			}
+		if (formatInfo.second.specified) {
+			secondFormat = function () {
+				return formatFunction('second', time.second, formatInfo);
+			};
 		}
 
-		if (formatInfo.meridian.specified){
-			meridianFormat = function(){
-				return formatFunction('meridian', time.meridian, formatInfo)
-			}
+		if (formatInfo.meridian.specified) {
+			meridianFormat = function () {
+				return formatFunction('meridian', time.meridian, formatInfo);
+			};
 		}
 	}
 
-	var result = []
+	var result = [];
 
-	if (time.hour != null){
-		result.push(hourFormat(time.hour))
+	if (time.hour != null) {
+		result.push(hourFormat(time.hour));
 	}
 
-	if (time.minute != null){
-	 	result.push(minuteFormat(time.minute))
+	if (time.minute != null) {
+		result.push(minuteFormat(time.minute));
 	}
 
-	if (time.second != null){
-		result.push(secondFormat(time.second))
+	if (time.second != null) {
+		result.push(secondFormat(time.second));
 	}
 
-	var str = result.join(':')
+	var str = result.join(':');
 
-	if (time.meridian){
-		str += ' ' + meridianFormat(time.meridian)
+	if (time.meridian) {
+		str += ' ' + meridianFormat(time.meridian);
 	}
 
-	return str
-}
+	return str;
+};

lib/getFormatInfo.js

 'use strict';
 
-	function getHourInfo(format, value){
-		var len = 1
-		var specified = false
+function getHourInfo(format, value) {
+	var len = 1;
+	var specified = false;
+	var full = false;
 
-		var index = format.indexOf('h')
+	var index = format.indexOf('h');
 
-		if (~index){
-			specified = true
-			if (format.charAt(index + 1) == 'h'){
-				len++
+	if (~index) {
+		specified = true;
+		if (format.charAt(index + 1) == 'h') {
+			len++;
+		}
+	} else {
+		index = format.indexOf('H');
+		full = true;
+		if (~index) {
+			specified = true;
+			if (format.charAt(index + 1) == 'H') {
+				len++;
 			}
-		} else {
-			index = format.indexOf('H')
-			if (~index){
-				specified = true
-				if (format.charAt(index + 1) == 'H'){
-					len++
-				}
-			}
 		}
-
-		return {
-			len: len,
-			specified: specified
-		}
 	}
 
-	function getMinuteInfo(format, value){
-		var len = 1
-		var specified = false
-		var index = format.indexOf('m')
+	return {
+		full: full,
+		len: len,
+		specified: specified
+	};
+}
 
-		if (~index){
-			specified =  true
-			if (format.charAt(index+1) == 'm'){
-				len++
-			}
-		}
+function getMinuteInfo(format, value) {
+	var len = 1;
+	var specified = false;
+	var index = format.indexOf('m');
 
-		return {
-			len: len,
-			specified: specified
+	if (~index) {
+		specified = true;
+		if (format.charAt(index + 1) == 'm') {
+			len++;
 		}
 	}
 
-	function getSecondInfo(format, value){
-		var len = 1
-		var specified = false
-		var index = format.indexOf('s')
+	return {
+		len: len,
+		specified: specified
+	};
+}
 
-		if (~index){
-			specified = true
-			if (format.charAt(index+1) == 's'){
-				len++
-			}
-		}
+function getSecondInfo(format, value) {
+	var len = 1;
+	var specified = false;
+	var index = format.indexOf('s');
 
-		return {
-			len: len,
-			specified: specified
+	if (~index) {
+		specified = true;
+		if (format.charAt(index + 1) == 's') {
+			len++;
 		}
 	}
 
-	function isMeridianUpperCase(format, value){
-		var uppercase = true
-		var specified = false
-		var index = format.indexOf('a')
+	return {
+		len: len,
+		specified: specified
+	};
+}
 
-		if (~index){
-			specified = true
-			uppercase = false
-		} else if (~format.indexOf('A')){
-			specified = true
-		}
+function isMeridianUpperCase(format, value) {
+	var uppercase = true;
+	var specified = false;
+	var index = format.indexOf('a');
 
-		return {
-			uppercase: uppercase,
-			lowercase: !uppercase,
-			specified: specified
-		}
+	if (~index) {
+		specified = true;
+		uppercase = false;
+	} else if (~format.indexOf('A')) {
+		specified = true;
 	}
 
-module.exports = function(format){
+	return {
+		uppercase: uppercase,
+		lowercase: !uppercase,
+		specified: specified
+	};
+}
 
-	if (typeof format != 'string'){
+module.exports = function (format) {
+
+	if (typeof format != 'string') {
 		return {
-			hour    : {specified: false},
-			minute  : {specified: false},
-			second  : {specified: false},
-			meridian: {specified: false}
-		}
+			hour: { specified: false },
+			minute: { specified: false },
+			second: { specified: false },
+			meridian: { specified: false }
+		};
 	}
 
 	return {
-		hour    : getHourInfo(format),
-		minute  : getMinuteInfo(format),
-		second  : getSecondInfo(format),
+		hour: getHourInfo(format),
+		minute: getMinuteInfo(format),
+		second: getSecondInfo(format),
 		meridian: isMeridianUpperCase(format)
-	}
-}
+	};
+};

lib/index.js

 'use strict';
 
-var React       = require('react')
-var assign      = require('object-assign')
-var normalize   = require('react-style-normalizer')
+var React = require('react');
+var assign = require('object-assign');
+var _normalize = require('react-style-normalizer');
+var moment = require('moment');
 
-var parseTime    = require('./parseTime')
-var updateTime   = require('./updateTime')
-var toUpperFirst = require('./toUpperFirst')
+var toUpperFirst = require('./toUpperFirst');
 
-var hasTouch = require('has-touch')
+var getFormat = require('./getFormat');
+var getFormatInfo = require('./getFormatInfo');
 
-var EVENT_NAMES = require('react-event-names')
+var hasTouch = require('has-touch');
 
-var WHITESPACE = '\u00a0'
+var EVENT_NAMES = require('react-event-names');
 
-function emptyFn(){}
+var WHITESPACE = ' ';
 
-var twoDigits     = require('./twoDigits')
-var getFormatInfo = require('./getFormatInfo')
-var format        = require('./format')
-var formatTime    = require('./formatTime')
+function emptyFn() {}
 
-function identity(v){ return v }
+var twoDigits = require('./twoDigits');
+var _format = require('./format');
+var formatTime = require('./formatTime');
 
+function identity(v) {
+	return v;
+}
+
 module.exports = React.createClass({
@@ -30,13 +33,13 @@
 
-	componentWillUnmount: function(){
-		this.stopInterval()
+	componentWillUnmount: function componentWillUnmount() {
+		this.stopInterval();
 	},
 
-	getInitialState: function(){
+	getInitialState: function getInitialState() {
 		return {
 			defaultValue: this.props.defaultValue,
 			focused: {
-				hour    : null,
-				minute  : null,
-				second  : null,
+				hour: null,
+				minute: null,
+				second: null,
 				meridian: null
@@ -50,6 +53,6 @@ },
 			}
-		}
+		};
 	},
 
-	getDefaultProps: function() {
+	getDefaultProps: function getDefaultProps() {
 		return {
@@ -106,5 +109,5 @@ normalizeStyle: true,
 			defaultBoxStyle: {
-				boxSizing : 'border-box',
-				display   : 'flex',
-				flexFlow  : 'column',
+				boxSizing: 'border-box',
+				display: 'flex',
+				flexFlow: 'column',
 				alignItems: 'center'
@@ -115,3 +118,3 @@ },
 				boxSizing: 'border-box',
-				width    : '100%',
+				width: '100%',
 				textAlign: 'center'
@@ -128,5 +131,3 @@ },
 
-			defaultMeridianInputProps: {
-				readOnly: true
-			},
+			defaultMeridianInputProps: {},
 
@@ -154,242 +155,249 @@ // format: 'HHmmssa',
 			timeToString: formatTime
-		}
+		};
 	},
 
-	normalize: function(style) {
-		return normalize(style)
+	normalize: function normalize(style) {
+		return _normalize(style);
 	},
 
-	render: function(){
-		var props = this.prepareProps(this.props, this.state)
+	render: function render() {
+		var props = this.prepareProps(this.props, this.state);
 
-		if (!props.normalizeStyle){
-			this.normalize = identity
+		if (!props.normalizeStyle) {
+			this.normalize = identity;
 		}
 
-		var hour     = this.renderHour(props)
-		var minute   = this.renderMinute(props)
-		var second   = this.renderSecond(props)
-		var meridian = this.renderMeridian(props)
+		var hour = this.renderHour(props);
+		var minute = this.renderMinute(props);
+		var second = this.renderSecond(props);
+		var meridian = this.renderMeridian(props);
 
-		var separator       = props.separator || React.createElement("span", {style: props.separatorStyle}, WHITESPACE + ':' + WHITESPACE)
-		var hourSeparator   = hour && (minute || second || meridian)? props.hourSeparator || separator: null
-		var minuteSeparator = minute && (second || meridian)? props.minuteSeparator || separator: null
-		var secondSeparator = (second && meridian)? props.secondSeparator || separator: null
+		var separator = props.separator || React.createElement(
+			'span',
+			{ style: props.separatorStyle },
+			WHITESPACE + ':' + WHITESPACE
+		);
+		var hourSeparator = hour && (minute || second || meridian) ? props.hourSeparator || separator : null;
+		var minuteSeparator = minute && (second || meridian) ? props.minuteSeparator || separator : null;
+		var secondSeparator = second && meridian ? props.secondSeparator || separator : null;
 
-
-		return React.createElement("div", React.__spread({},  props), 
-			hour, 
-			hourSeparator, 
-			minute, 
-			minuteSeparator, 
-			second, 
-			secondSeparator, 
+		return React.createElement(
+			'div',
+			props,
+			hour,
+			hourSeparator,
+			minute,
+			minuteSeparator,
+			second,
+			secondSeparator,
 			meridian
-		)
+		);
 	},
 
-	onArrowMouseEnter: function(props, dir, name, event) {
-		var overArrow = this.state.overArrow
+	onArrowMouseEnter: function onArrowMouseEnter(props, dir, name, event) {
+		var overArrow = this.state.overArrow;
 
-		Object.keys(overArrow).forEach(function(key){
-			overArrow[key] = null
-		})
+		Object.keys(overArrow).forEach(function (key) {
+			overArrow[key] = null;
+		});
 
-		overArrow[name] = dir
+		overArrow[name] = dir;
 
-		this.setState({})
+		this.setState({});
 	},
 
-	onArrowMouseLeave: function(props, dir, name, event) {
-		this.state.overArrow[name] = null
+	onArrowMouseLeave: function onArrowMouseLeave(props, dir, name, event) {
+		this.state.overArrow[name] = null;
 
-		this.setState({})
+		this.setState({});
 	},
 
-	onArrowMouseDown: function(props, dir, name, event){
+	onArrowMouseDown: function onArrowMouseDown(props, dir, name, event) {
 
-		event.preventDefault()
+		event.preventDefault();
 
-		if (name == 'meridian'){
-			this.onArrowMeridianAction(props, dir, name)
-			return
+		if (name == 'meridian') {
+			this.onArrowMeridianAction(props, dir, name);
+			return;
 		}
 
-		var target = hasTouch?
-		                event.target:
-		                window
-		var eventName = hasTouch?
-							'touchend':
-							'click'
+		var target = hasTouch ? event.target : window;
+		var eventName = hasTouch ? 'touchend' : 'click';
 
-		target.addEventListener(eventName, this.onWindowClick)
+		target.addEventListener(eventName, this.onWindowClick);
 
-		this.onArrowAction(props, dir, name)
+		this.onArrowAction(props, dir, name);
 
-		this.timeoutId = setTimeout(function(){
-			this.startInterval(props, dir, name)
-		}.bind(this), props.stepDelay)
+		this.timeoutId = setTimeout((function () {
+			this.startInterval(props, dir, name);
+		}).bind(this), props.stepDelay);
 	},
 
-	onWindowClick: function(){
-		this.stopInterval()
+	onWindowClick: function onWindowClick() {
+		this.stopInterval();
 	},
 
-	stopInterval: function(){
-		clearTimeout(this.timeoutId)
-		clearInterval(this.intervalId)
+	stopInterval: function stopInterval() {
+		clearTimeout(this.timeoutId);
+		clearInterval(this.intervalId);
 	},
 
-	startInterval: function(props, dir, name){
-		this.intervalId = setInterval(function(){
-			this.onArrowAction(props, dir, name)
-		}.bind(this), props.stepDelay)
+	startInterval: function startInterval(props, dir, name) {
+		this.intervalId = setInterval((function () {
+			this.onArrowAction(props, dir, name);
+		}).bind(this), props.stepDelay);
 	},
 
-	onMeridianInputMouseDown: function(props, event){
-		event.preventDefault()
-		this.onArrowMeridianAction(props, 1, 'meridian')
+	onMeridianInputMouseDown: function onMeridianInputMouseDown(props, event) {
+		//prevent focus on mouse down on meridian input
+		event.preventDefault();
+		//the input can still be focused by tab navigation, we're okay with that
+
+		this.onArrowMeridianAction(props, 1, 'meridian');
 	},
 
-	onArrowMeridianAction: function(props, dir, name){
-		var currentMeridian = this.time.meridian
-		var lowercase = currentMeridian == 'am' || currentMeridian == 'pm'
-
-		var newValue = lowercase?
-							currentMeridian == 'am'? 'pm': 'am'
-							:
-							currentMeridian == 'AM'? 'PM': 'AM'
-
-		this.updateValue(name, newValue)
+	onArrowMeridianAction: function onArrowMeridianAction(props, dir, name) {
+		this.addTime('hour', dir * 12);
 	},
 
-	onArrowAction: function(props, dir, name) {
+	onArrowAction: function onArrowAction(props, dir, name) {
 
-		var dirName = dir == 1? 'Up': 'Down'
-		var methodName = 'onArrow' + dirName + toUpperFirst(name) + 'Action'
+		var dirName = dir == 1 ? 'Up' : 'Down';
+		var methodName = 'onArrow' + dirName + toUpperFirst(name) + 'Action';
 
-		if (typeof this[methodName] == 'function'){
-			this[methodName](props)
+		if (typeof this[methodName] == 'function') {
+			this[methodName](props);
 		}
 
-		methodName = 'onArrow' + toUpperFirst(name) + 'Action'
+		methodName = 'onArrow' + toUpperFirst(name) + 'Action';
 
-		if (typeof this[methodName] == 'function'){
-			this[methodName](props, dir)
+		if (typeof this[methodName] == 'function') {
+			this[methodName](props, dir);
 		}
 
-		this.incValue(props, name, dir)
+		this.incValue(props, name, dir);
 	},
 
-	incValue: function(props, name, dir){
-		dir = dir || 0
+	incValue: function incValue(props, name, dir) {
 
-		var step     = props[name + 'Step'] || props.step
-		var amount   = dir * step
-		var time     = this.time
-		var oldValue = time[name]
-		var newValue = oldValue + amount
+		var fieldFocused = this.state.focused[name];
 
-		// this.setValue(time)
-		this.updateValue(name, newValue)
+		if (!fieldFocused || this.lastStateChange != name) {
+			dir = dir || 0;
+
+			var step = props[name + 'Step'] || props.step;
+			var amount = dir * step;
+
+			this.addTime(name, amount);
+		} else {
+
+			var value = parseInt(fieldFocused.value, 10);
+
+			value += dir;
+
+			if (name == 'hour') {
+				if (props.time.meridian == 'PM') {
+					value += value < 12 ? 12 : 0;
+				}
+			}
+
+			this.setTime(name, value);
+		}
+
+		this.lastStateChange = null;
 	},
 
-	updateValue: function(name, newValue, config){
-		this.setValue(this.updateTime(name, newValue, config))
+	addTime: function addTime(name, amount) {
+		this.setValue(moment(this.moment).add(amount, name));
 	},
 
-	updateTime: function(name, newValue, config){
-		config = config || {}
-		config.overflowHourToMeridian = this.props.overflowHourToMeridian
+	setTime: function setTime(name, value) {
+		var clone = moment(this.moment);
+		clone.set(name, value);
 
-		var time = this.time
+		this.setValue(clone);
+	},
 
-		time = updateTime(time, name, newValue, config)
+	setValue: function setValue(moment) {
 
-		return this.time = time
-	},
+		var props = this.p;
+		var time = this.getTime(moment);
 
-	setValue: function(time){
+		var focused = this.state.focused;
+		var newState = {};
 
-		var focused  = this.state.focused
-		var newState = {}
-
-		if (focused){
-			Object.keys(focused).forEach(function(key){
-				if (focused[key]){
-					focused[key].value = this.format(this.props, key, time[key])
+		if (focused) {
+			Object.keys(focused).forEach(function (key) {
+				if (focused[key]) {
+					focused[key].value = this.format(props, key, time[key]);
 				}
-			}, this)
+			}, this);
 		}
 
-		if (this.props.value == null){
+		var timeString = moment.format(props.format);
+
+		if (this.props.value == null) {
 			this.setState({
-				defaultValue: time
-			})
+				defaultValue: timeString
+			});
 		}
 
-		;(this.props.onChange || emptyFn)(this.props.timeToString(time, this.props.format), assign({}, time))
+		;(this.props.onChange || emptyFn)(timeString, moment, assign({}, time));
 	},
 
-	format: function(props, name, value){
-		var renderFn
+	format: function format(props, name, value) {
+		var renderFn;
 
-		if (arguments.length < 3){
-			value = props.time[name]
+		if (arguments.length < 3) {
+			value = props.time[name];
 		}
 
-		if (name != 'meridian'){
-			renderFn = props['render' + toUpperFirst(name)]
+		if (name != 'meridian') {
+			renderFn = props['render' + toUpperFirst(name)];
 		} else {
-			renderFn = props.renderMeridian
+			renderFn = props.renderMeridian;
 		}
 
-		if (!renderFn && typeof props.format == 'string'){
-			var formatInfo = this.formatInfo
-			renderFn = function(value, name){
-				return format(name, value, formatInfo)
-			}
+		if (!renderFn && typeof props.format == 'string') {
+			var formatInfo = props.formatInfo;
+			renderFn = function (value, name) {
+				return _format(name, value, formatInfo);
+			};
 		}
 
-		if (!renderFn){
-			renderFn = twoDigits
+		if (!renderFn) {
+			renderFn = twoDigits;
 		}
 
-		if (typeof renderFn == 'function'){
-			value = renderFn(value, name, props)
+		if (typeof renderFn == 'function') {
+			value = renderFn(value, name, props);
 		}
 
-		return value
+		return value;
 	},
 
-	renderBox: function(props, name){
-		var state = this.state
-		var style      = props[name + 'Style']
-		var inputStyle = props[name + 'InputStyle']
-		var upperName  = toUpperFirst(name)
+	renderBox: function renderBox(props, name) {
+		var state = this.state;
+		var style = props[name + 'Style'];
+		var inputStyle = props[name + 'InputStyle'];
+		var upperName = toUpperFirst(name);
 
-		var value
+		var value;
 
-		if (!state.focused[name]){
-			value = this.format(props, name)
+		if (!state.focused[name]) {
+			value = this.format(props, name);
 		} else {
-			value = state.focused[name].value
+			value = state.focused[name].value;
 		}
 
-		var arrowUp
-		var arrowDown
+		var arrowUp;
+		var arrowDown;
 
-		if (props.showArrows){
-			var overArrow = this.state.overArrow[name]
+		if (props.showArrows) {
+			var overArrow = this.state.overArrow[name];
 
-			var arrowUpStyle = props.arrowUpStyle
+			var arrowUpStyle = props.arrowUpStyle;
 
-			if (overArrow == 1){
-				arrowUpStyle = assign({},
-									props.arrowUpStyle,
-									props.defaultArrowOverStyle,
-									props.defaultArrowUpOverStyle,
-									props.arrowOverStyle,
-									props.arrowUpOverStyle
-								)
+			if (overArrow == 1) {
+				arrowUpStyle = assign({}, props.arrowUpStyle, props.defaultArrowOverStyle, props.defaultArrowUpOverStyle, props.arrowOverStyle, props.arrowUpOverStyle);
 			}
@@ -399,20 +407,14 @@
 				mouseOver: overArrow == 1,
-				style    : arrowUpStyle,
-				children : '▲'
-			}
+				style: arrowUpStyle,
+				children: '▲'
+			};
 
-			arrowUpProps[EVENT_NAMES.onMouseDown] = this.onArrowMouseDown.bind(this, props, 1, name)
-			arrowUpProps.onMouseEnter = this.onArrowMouseEnter.bind(this, props, 1, name)
-			arrowUpProps.onMouseLeave = this.onArrowMouseLeave.bind(this, props, 1, name)
+			arrowUpProps[EVENT_NAMES.onMouseDown] = this.onArrowMouseDown.bind(this, props, 1, name);
+			arrowUpProps.onMouseEnter = this.onArrowMouseEnter.bind(this, props, 1, name);
+			arrowUpProps.onMouseLeave = this.onArrowMouseLeave.bind(this, props, 1, name);
 
-			var arrowDownStyle = props.arrowDownStyle
+			var arrowDownStyle = props.arrowDownStyle;
 
-			if (overArrow == -1){
-				arrowDownStyle = assign({},
-									props.arrowDownStyle,
-									props.defaultArrowOverStyle,
-									props.defaultArrowDownOverStyle,
-									props.arrowOverStyle,
-									props.arrowDownOverStyle
-								)
+			if (overArrow == -1) {
+				arrowDownStyle = assign({}, props.arrowDownStyle, props.defaultArrowOverStyle, props.defaultArrowDownOverStyle, props.arrowOverStyle, props.arrowDownOverStyle);
 			}
@@ -422,264 +424,301 @@
 				mouseOver: overArrow == -1,
-				style    : arrowDownStyle,
-				children : '▼'
-			}
+				style: arrowDownStyle,
+				children: '▼'
+			};
 
-			arrowDownProps[EVENT_NAMES.onMouseDown] = this.onArrowMouseDown.bind(this, props, -1, name)
-			arrowDownProps.onMouseEnter = this.onArrowMouseEnter.bind(this, props, -1, name)
-			arrowDownProps.onMouseLeave = this.onArrowMouseLeave.bind(this, props, -1, name)
+			arrowDownProps[EVENT_NAMES.onMouseDown] = this.onArrowMouseDown.bind(this, props, -1, name);
+			arrowDownProps.onMouseEnter = this.onArrowMouseEnter.bind(this, props, -1, name);
+			arrowDownProps.onMouseLeave = this.onArrowMouseLeave.bind(this, props, -1, name);
 
-			var defaultArrowFactory = props.defaultArrowFactory
-			var arrowUpFactory = props.arrowUpFactory || props.arrowFactory || defaultArrowFactory
-			var arrowDownFactory = props.arrowDownFactory || props.arrowFactory || defaultArrowFactory
+			var defaultArrowFactory = props.defaultArrowFactory;
+			var arrowUpFactory = props.arrowUpFactory || props.arrowFactory || defaultArrowFactory;
+			var arrowDownFactory = props.arrowDownFactory || props.arrowFactory || defaultArrowFactory;
 
-			arrowUp = arrowUpFactory(arrowUpProps)
+			arrowUp = arrowUpFactory(arrowUpProps);
 
-			if (arrowUp === undefined){
-				arrowUp = defaultArrowFactory(arrowUpProps)
+			if (arrowUp === undefined) {
+				arrowUp = defaultArrowFactory(arrowUpProps);
 			}
 
-			arrowDown = arrowDownFactory(arrowDownProps)
-			if (arrowDown === undefined){
-				arrowDown = defaultArrowFactory(arrowDownProps)
+			arrowDown = arrowDownFactory(arrowDownProps);
+			if (arrowDown === undefined) {
+				arrowDown = defaultArrowFactory(arrowDownProps);
 			}
 		}
 
-		var defaultInputFactory = props.defaultInputFactory
-		var inputFactory = props[name + 'InputFactory'] || props.inputFactory || defaultInputFactory
+		var defaultInputFactory = props.defaultInputFactory;
+		var inputFactory = props[name + 'InputFactory'] || props.inputFactory || defaultInputFactory;
 
-		var defaultInputProps = props['default' + upperName + 'InputProps']
-		var inputProps        = props[name + 'InputProps']
+		var defaultInputProps = props['default' + upperName + 'InputProps'];
+		var inputProps = props[name + 'InputProps'];
 
 		var inputProps = assign({}, props.inputProps, defaultInputProps, inputProps, {
 			timeName: name,
-			style   : inputStyle,
-			value   : value,
-      		onBlur  : this.handleInputBlur.bind(this, props, name),
-      		onChange: this.handleInputChange.bind(this, props, name),
-      		onFocus : this.handleInputFocus.bind(this, props, name),
-		})
+			style: inputStyle,
+			value: value,
+			onBlur: this.handleInputBlur.bind(this, props, name),
+			onChange: this.handleInputChange.bind(this, props, name),
+			onFocus: this.handleInputFocus.bind(this, props, name) });
 
-		if (props.useArrowKeys){
-			inputProps.onKeyDown = this.handleInputKeyDown.bind(this, props, name)
+		if (props.useArrowKeys) {
+			inputProps.onKeyDown = this.handleInputKeyDown.bind(this, props, name);
 		}
 
-		if (name == 'meridian'){
-			inputProps.onMouseDown = this.onMeridianInputMouseDown.bind(this, props)
+		if (name == 'meridian') {
+			inputProps.onMouseDown = this.onMeridianInputMouseDown.bind(this, props);
 		}
 
-		var input = inputFactory(inputProps)
+		var input = inputFactory(inputProps);
 
-		if (input === undefined){
-			input = defaultInputFactory(inputProps)
+		if (input === undefined) {
+			input = defaultInputFactory(inputProps);
 		}
 
-
-		return React.createElement("div", {style: style}, 
-			arrowUp, 
-			input, 
+		return React.createElement(
+			'div',
+			{ style: style },
+			arrowUp,
+			input,
 			arrowDown
-		)
+		);
 	},
 
-	handleInputFocus: function(props, name, event){
-		var focused = this.state.focused
+	handleInputFocus: function handleInputFocus(props, name, event) {
+		var focused = this.state.focused;
 
 		focused[name] = {
 			value: this.format(props, name)
-		}
+		};
 
-		this.stopInterval()
+		this.stopInterval();
 
-		this.setState({})
+		this.setState({});
 	},
 
-	handleInputBlur: function(props, name, event){
+	handleInputBlur: function handleInputBlur(props, name, event) {
 
-		this.state.focused[name] = null
-		this.setState({})
+		this.incValue(props, name, 0);
 
-		var time
-		var value = event.target.value * 1
-
-		this.updateValue(name, value, {
-			clamp: props.clamp
-		})
+		this.state.focused[name] = null;
+		this.setState({});
 	},
 
-	handleInputChange: function(props, name, event){
-		if (this.state.focused[name]){
-			this.state.focused[name].value = event.target.value
+	handleInputChange: function handleInputChange(props, name, event) {
+		if (this.state.focused[name]) {
+			this.state.focused[name].value = event.target.value;
 		}
 
-		this.setState({})
-		props.stopChangePropagation && event.stopPropagation()
-  	},
+		this.lastStateChange = name;
 
-  	handleInputKeyDown: function(props, name, event){
+		this.setState({});
+		props.stopChangePropagation && event.stopPropagation();
+	},
 
-    	if (event.key === 'ArrowDown') {
-      		this.incValue(props, name, -1)
-    	}
+	/**
+  * Called on keydown on all inputs, including meridian
+  *
+  * @param  {Object} props
+  * @param  {String} name
+  * @param  {Event} event
+  */
+	handleInputKeyDown: function handleInputKeyDown(props, name, event) {
 
-    	if (event.key === 'ArrowUp') {
-      		this.incValue(props, name, 1)
-    	}
-  	},
+		if (name == 'meridian') {
+			var letter = String.fromCharCode(event.keyCode);
+			var isMeridianLetter = letter == 'A' || letter == 'P';
 
-	getTime: function(){
-		var strict = this.props.strict
+			if (isMeridianLetter || event.key == ' ' //space
+			 || event.key == 'Enter' || event.key == 'ArrowUp' || event.key == 'ArrowDown' || event.key == 'ArrowLeft' || event.key == 'ArrowRight') {
 
-		var formatInfo = this.formatInfo = getFormatInfo(this.props.format)
+				event.preventDefault();
 
-		return parseTime(this.getValue(), {
-			strict: strict,
+				if (isMeridianLetter && letter + 'M' == this.time.meridian) {
+					return;
+				}
 
-			hour    : formatInfo.hour,
-			minute  : formatInfo.minute,
-			second  : formatInfo.second,
-			meridian: formatInfo.meridian
-		})
-	},
+				this.addTime('hour', 12);
+				return;
+			}
+		}
 
-	prepareTime: function(props, state) {
-		var timeValue  = this.getTime()
-		var formatInfo = this.props.format?
-							this.formatInfo:
-							null
+		if (event.key === 'ArrowDown') {
+			this.incValue(props, name, -1);
+		}
 
-		props.showSecond = formatInfo?
-								formatInfo.second.specified:
-								timeValue.second !== undefined
+		if (event.key === 'ArrowUp') {
+			this.incValue(props, name, 1);
+		}
+	},
 
-		props.showMinute = formatInfo?
-								formatInfo.minute.specified:
-								timeValue.minute !== undefined
+	renderHour: function renderHour(props) {
+		return this.renderBox(props, 'hour');
+	},
 
-		props.withMeridian = formatInfo?
-								formatInfo.meridian.specified:
-								timeValue.meridian != null
+	renderMinute: function renderMinute(props) {
+		if (props.showMinute) {
+			return this.renderBox(props, 'minute');
+		}
+	},
 
-		return timeValue
+	renderSecond: function renderSecond(props) {
+		if (props.showSecond) {
+			return this.renderBox(props, 'second');
+		}
 	},
 
-	getValue: function() {
-	    var value = this.props.value == null?
-	                    this.state.defaultValue:
-	                    this.props.value
-
-	    return value
+	renderMeridian: function renderMeridian(props) {
+		if (props.withMeridian) {
+			return this.renderBox(props, 'meridian');
+		}
 	},
 
-	renderHour: function(props) {
-		return this.renderBox(props, 'hour')
+	toMoment: function toMoment(value, format) {
+		format = format || this.prepareFormat(this.props);
+
+		return moment(value, format);
 	},
 
-	renderMinute: function(props) {
-		if (props.showMinute){
-			return this.renderBox(props, 'minute')
+	getTime: function getTime(moment) {
+
+		var formatInfo = this.p.formatInfo;
+		var time = {};
+
+		if (formatInfo.hour.specified) {
+			time.hour = formatInfo.meridian.specified ? moment.format('h') * 1 : moment.hour();
 		}
-	},
 
-	renderSecond: function(props) {
-		if (props.showSecond){
-			return this.renderBox(props, 'second')
+		if (formatInfo.minute.specified) {
+			time.minute = moment.minute();
 		}
-	},
 
-	renderMeridian: function(props) {
-		if (props.withMeridian){
-			return this.renderBox(props, 'meridian')
+		if (formatInfo.second.specified) {
+			time.second = moment.second();
 		}
+
+		if (formatInfo.meridian.specified) {
+			time.meridian = moment.format('A');
+		}
+
+		return time;
 	},
 
-	prepareProps: function(thisProps, state) {
-		var props = assign({}, thisProps)
+	prepareFormat: function prepareFormat(props) {
+		var value = props.value;
+		var format = props.format || getFormat(value) || 'HH:mm:ss';
 
-		this.time = props.time = this.prepareTime(props, state)
-		this.prepareStyles(props, state)
+		return format;
+	},
 
-		return props
+	prepareBoxes: function prepareBoxes(props) {
+		var formatInfo = props.formatInfo;
+
+		props.showSecond = formatInfo.second.specified;
+		props.showMinute = formatInfo.minute.specified;
+		props.withMeridian = formatInfo.meridian.specified;
 	},
 
-	prepareStyles: function(props, state) {
+	getValue: function getValue() {
+		var value = this.props.value == null ? this.state.defaultValue : this.props.value;
 
-		props.style = this.prepareStyle(props, state)
-		props.separatorStyle = this.prepareSeparatorStyle(props, state)
-		this.prepareArrowStyles(props, state)
+		return value;
+	},
 
-		this.prepareHourStyles(props, state)
-		this.prepareMinuteStyles(props, state)
-		this.prepareSecondStyles(props, state)
-		this.prepareMeridianStyles(props, state)
+	prepareProps: function prepareProps(thisProps, state) {
+		var props = this.p = assign({}, thisProps);
 
+		props.value = this.getValue();
+		props.format = this.prepareFormat(props);
+		props.formatInfo = getFormatInfo(props.format);
+
+		this.moment = props.moment = this.toMoment(props.value, props.format);
+		this.time = props.time = this.getTime(props.moment);
+
+		this.prepareBoxes(props, state);
+		this.prepareStyles(props, state);
+
+		return props;
 	},
 
-	prepareStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultStyle, props.style))
+	prepareStyles: function prepareStyles(props, state) {
+
+		props.style = this.prepareStyle(props, state);
+		props.separatorStyle = this.prepareSeparatorStyle(props, state);
+		this.prepareArrowStyles(props, state);
+
+		this.prepareHourStyles(props, state);
+		this.prepareMinuteStyles(props, state);
+		this.prepareSecondStyles(props, state);
+		this.prepareMeridianStyles(props, state);
 	},
 
-	prepareSeparatorStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultSeparatorStyle, props.separatorStyle))
+	prepareStyle: function prepareStyle(props, state) {
+		return this.normalize(assign({}, props.defaultStyle, props.style));
 	},
 
-	prepareArrowStyles: function(props, state) {
-		props.arrowUpStyle = this.normalize(assign({}, props.defaultArrowStyle, props.defaultArrowUpStyle, props.arrowStyle, props.arrowUpStyle))
-		props.arrowDownStyle = this.normalize(assign({}, props.defaultArrowStyle, props.defaultArrowDownStyle, props.arrowStyle, props.arrowDownStyle))
+	prepareSeparatorStyle: function prepareSeparatorStyle(props, state) {
+		return this.normalize(assign({}, props.defaultSeparatorStyle, props.separatorStyle));
 	},
 
-	prepareHourStyles: function(props, state) {
-		props.hourStyle = this.prepareHourStyle(props, state)
-		props.hourInputStyle = this.prepareHourInputStyle(props, state)
+	prepareArrowStyles: function prepareArrowStyles(props, state) {
+		props.arrowUpStyle = this.normalize(assign({}, props.defaultArrowStyle, props.defaultArrowUpStyle, props.arrowStyle, props.arrowUpStyle));
+		props.arrowDownStyle = this.normalize(assign({}, props.defaultArrowStyle, props.defaultArrowDownStyle, props.arrowStyle, props.arrowDownStyle));
 	},
 
-	prepareHourStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultHourStyle, props.boxStyle, props.hourStyle))
+	prepareHourStyles: function prepareHourStyles(props, state) {
+		props.hourStyle = this.prepareHourStyle(props, state);
+		props.hourInputStyle = this.prepareHourInputStyle(props, state);
 	},
 
-	prepareHourInputStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultInputStyle, props.defaultHourInputStyle, props.inputStyle, props.hourInputStyle))
+	prepareHourStyle: function prepareHourStyle(props, state) {
+		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultHourStyle, props.boxStyle, props.hourStyle));
 	},
 
-	prepareMinuteStyles: function(props, state) {
-		props.minuteStyle = this.prepareMinuteStyle(props, state)
-		props.minuteInputStyle = this.prepareMinuteInputStyle(props, state)
+	prepareHourInputStyle: function prepareHourInputStyle(props, state) {
+		return this.normalize(assign({}, props.defaultInputStyle, props.defaultHourInputStyle, props.inputStyle, props.hourInputStyle));
 	},
 
-	prepareMinuteStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultMinuteStyle, props.boxStyle, props.minuteStyle))
+	prepareMinuteStyles: function prepareMinuteStyles(props, state) {
+		props.minuteStyle = this.prepareMinuteStyle(props, state);
+		props.minuteInputStyle = this.prepareMinuteInputStyle(props, state);
 	},
 
-	prepareMinuteInputStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultInputStyle, props.defaultMinuteInputStyle, props.inputStyle, props.minuteInputStyle))
+	prepareMinuteStyle: function prepareMinuteStyle(props, state) {
+		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultMinuteStyle, props.boxStyle, props.minuteStyle));
 	},
 
-	prepareSecondStyles: function(props, state) {
-		if (props.showSecond){
-			props.secondStyle = this.prepareSecondStyle(props, state)
-			props.secondInputStyle = this.prepareSecondInputStyle(props, state)
+	prepareMinuteInputStyle: function prepareMinuteInputStyle(props, state) {
+		return this.normalize(assign({}, props.defaultInputStyle, props.defaultMinuteInputStyle, props.inputStyle, props.minuteInputStyle));
+	},
+
+	prepareSecondStyles: function prepareSecondStyles(props, state) {
+		if (props.showSecond) {
+			props.secondStyle = this.prepareSecondStyle(props, state);
+			props.secondInputStyle = this.prepareSecondInputStyle(props, state);
 		}
 	},
 
-	prepareSecondStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultSecondStyle, props.boxStyle, props.secondStyle))
+	prepareSecondStyle: function prepareSecondStyle(props, state) {
+		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultSecondStyle, props.boxStyle, props.secondStyle));
 	},
 
-	prepareSecondInputStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultInputStyle, props.defaultSecondInputStyle, props.inputStyle, props.secondInputStyle))
+	prepareSecondInputStyle: function prepareSecondInputStyle(props, state) {
+		return this.normalize(assign({}, props.defaultInputStyle, props.defaultSecondInputStyle, props.inputStyle, props.secondInputStyle));
 	},
 
-	prepareMeridianStyles: function(props, state){
-		if (props.withMeridian){
-			props.meridianStyle = this.prepareMeridianStyle(props, state)
-			props.meridianInputStyle = this.prepareMeridianInputStyle(props, state)
+	prepareMeridianStyles: function prepareMeridianStyles(props, state) {
+		if (props.withMeridian) {
+			props.meridianStyle = this.prepareMeridianStyle(props, state);
+			props.meridianInputStyle = this.prepareMeridianInputStyle(props, state);
 		}
 	},
 
-	prepareMeridianStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultMeridianStyle, props.boxStyle, props.meridianStyle))
+	prepareMeridianStyle: function prepareMeridianStyle(props, state) {
+		return this.normalize(assign({}, props.defaultBoxStyle, props.defaultMeridianStyle, props.boxStyle, props.meridianStyle));
 	},
 
-	prepareMeridianInputStyle: function(props, state) {
-		return this.normalize(assign({}, props.defaultInputStyle, props.defaultMeridianInputStyle, props.inputStyle, props.meridianInputStyle))
+	prepareMeridianInputStyle: function prepareMeridianInputStyle(props, state) {
+		return this.normalize(assign({}, props.defaultInputStyle, props.defaultMeridianInputStyle, props.inputStyle, props.meridianInputStyle));
 	}
-})
+});
+
+// readOnly: true

lib/parseTime.js

 'use strict';
 
-var parseTime      = require('parse-time')
-var adjustOverflow = parseTime.adjustOverflow
+var parseTime = require('parse-time');
+var adjustOverflow = parseTime.adjustOverflow;
 
-var defaults = {}
+var defaults = {};
 
-function onInvalid(timeValue, config){
+function onInvalid(timeValue, config) {
 
-	timeValue.invalid.forEach(function(info){
+	timeValue.invalid.forEach(function (info) {
 
-		var name  = info.name
-		var value = info.value * 1
+		var name = info.name;
+		var value = info.value * 1;
 
-		if (!isNaN(value)){
-			timeValue[name] = value
+		if (!isNaN(value)) {
+			timeValue[name] = value;
 		}
-	})
+	});
 
-	return adjustOverflow(timeValue, config)
+	return adjustOverflow(timeValue, config);
 }
 
-module.exports = function(value, config){
+module.exports = function (value, config) {
 
-	config = config || defaults
+	config = config || defaults;
 
-	value = value || ''
+	value = value || '';
 
-	if (typeof value == 'string'){
-		value = parseTime(value, config)
+	if (typeof value == 'string') {
+		value = parseTime(value, config);
 	}
 
-	var definedParts = {}
+	var definedParts = {};
 
-	if (value){
+	if (value) {
 
-		config.withMeridian = value.meridian != null
+		config.withMeridian = value.meridian != null;
 
-		if (value.invalid){
-			value.invalid.forEach(function(info){
-				definedParts[info.name] = true
-			})
+		if (value.invalid) {
+			value.invalid.forEach(function (info) {
+				definedParts[info.name] = true;
+			});
 		}
 
-		if (!config.strict && value.invalid){
-			value = onInvalid(value, config)
+		if (!config.strict && value.invalid) {
+			value = onInvalid(value, config);
 		}
 
-		if (definedParts.hour){
-			value.hour = value.hour || 0
+		if (definedParts.hour) {
+			value.hour = value.hour || 0;
 		}
 
-		if (definedParts.minute){
-			value.minute = value.minute || 0
+		if (definedParts.minute) {
+			value.minute = value.minute || 0;
 		}
 
-		if (definedParts.second){
-			value.second = value.second || 0
+		if (definedParts.second) {
+			value.second = value.second || 0;
 		}
@@ -65,27 +65,27 @@
 
-		if (config.strict && value.meridian && value.hour === 12){
-			if (value.minute !== undefined){
-				value.minute = 0
-			}
-			if (value.second !== undefined){
-				value.second = 0
-			}
-		}
+		// if (config.strict && value.meridian && value.hour === 12){
+		// 	if (value.minute !== undefined){
+		// 		value.minute = 0
+		// 	}
+		// 	if (value.second !== undefined){
+		// 		value.second = 0
+		// 	}
+		// }
 	}
 
 	var result = {
-		hour  : value.hour
+		hour: value.hour
+	};
+	if (value.minute !== undefined) {
+		result.minute = value.minute;
 	}
-	if (value.minute !== undefined){
-		result.minute = value.minute
+	if (value.second !== undefined) {
+		result.second = value.second;
 	}
-	if (value.second !== undefined){
-		result.second = value.second
-	}
 
-	if (config.withMeridian){
-		result.meridian = value.meridian
+	if (config.withMeridian) {
+		result.meridian = value.meridian;
 	}
 
-	return result
-}
+	return result;
+};

lib/toUpperFirst.js

 'use strict';
 
-module.exports = function(str){
-	return str?
-			str.charAt(0).toUpperCase() + str.slice(1):
-			''
-}
+module.exports = function (str) {
+		return str ? str.charAt(0).toUpperCase() + str.slice(1) : '';
+};

lib/twoDigits.js

 'use strict';
 
-
-module.exports = function twoDigits(value){
-	return value < 10?
-			'0' + value:
-			value
-}
+module.exports = function twoDigits(value) {
+		return value < 10 ? '0' + value : value;
+};

lib/updateTime.js

 'use strict';
 
-var update = require('parse-time').updateTime
+var update = require('parse-time').updateTime;
 
-module.exports = function(time, name, value, config){
-	time = update(time, name, value, config)
+module.exports = function (time, name, value, config) {
 
-	return time
-}
+	time = update(time, name, value, config);
+
+	return time;
+};

loaders.config.js

 module.exports = [
     {
         test: /\.jsx$/,
-        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
+        exclude: /node_modules/,
+        loader: 'babel-loader'
     },
     {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+    },
+    {
         test: /\.styl$/,
@@ -8,0 +14,0 @@ loader: 'style-loader!css-loader!stylus-loader'

package.json

 {
   "name": "react-time-picker",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "React Time Picker",
@@ -9,21 +9,23 @@ "main": "lib/index.js",
     "test-w": "make test-w",
-    "test-debug": "./node_modules/.bin/mocha --debug-brk",
-    "lib": "./node_modules/.bin/gulp",
-    "dist": "./node_modules/.bin/webpack --progress --colors --config dist.config.js",
-    "dist.min": "./node_modules/.bin/webpack --progress --colors --optimize-minimize --optimize-occurence-order --optimize-dedupe --config dist.min.config.js",
-    "build": "npm run lib && npm run dist && npm run dist.min",
-    "serve": "./node_modules/.bin/http-server -p 9091",
-    "dev": "./node_modules/.bin/webpack-dev-server --progress --colors --port 9090 --content-base http://localhost:9091"
+    "test-debug": "mocha --debug-brk",
+    "lib": "gulp",
+    "dist": "webpack --progress --colors --config dist.config.js",
+    "dist.nomoment": "webpack --progress --colors --config dist.nomoment.config.js",
+    "dist.min": "webpack --progress --colors --optimize-minimize --optimize-occurence-order --optimize-dedupe --config dist.min.config.js",
+    "dist.nomoment.min": "webpack --progress --colors --optimize-minimize --optimize-occurence-order --optimize-dedupe --config dist.nomoment.min.config.js",
+    "build": "npm run lib && npm run dist && npm run dist.min && npm run dist.nomoment && npm run dist.nomoment.min",
+    "dev": "webpack-dev-server --progress --colors"
   },
   "devDependencies": {
+    "babel-core": "^5.4.3",
+    "babel-loader": "^5.1.2",
     "css-loader": "^0.9.0",
     "exports-loader": "^0.6.2",
     "gulp": "^3.8.10",
-    "gulp-react": "^2.0.0",
-    "http-server": "^0.7.3",
-    "jsx-loader": "^0.12.2",
+    "gulp-babel": "^5.1.0",
     "mocha": "^2.1.0",
+    "node-libs-browser": "^0.5.0",
     "should": "^5.0.0",
-    "webpack": "^1.4.13",
-    "webpack-dev-server": "^1.6.6"
+    "webpack": "^1.9.7",
+    "webpack-dev-server": "^1.8.2"
   },
@@ -33,3 +35,2 @@ "dependencies": {
     "object-assign": "^2.0.0",
-    "parse-time": "^0.1.1",
     "react-event-names": "^1.0.0",
@@ -39,3 +40,4 @@ "react-style-normalizer": "^1.2.6"
   "peerDependencies": {
-    "react": ">=0.12.0"
+      "moment": ">=2.8.0",
+      "react": ">=0.12.0"
   },
@@ -54,5 +56,3 @@ "repository": {
   "author": "ZippyUI <[e-mail]>",
-  "contributors": [
-    "Radu Brehar <[e-mail]>"
-  ],
+  "contributors": [],
   "license": "MIT",
@@ -59,0 +59,0 @@ "bugs": {

README.md

@@ -40,2 +40,20 @@ # react-time-picker
 
+#### NOTES
+
+The time picker depends on [ReactJS](https://www.npmjs.com/package/react) and [MomentJS](https://www.npmjs.com/package/moment).
+
+If you use files from the dist folder:
+
+ * `dist/react-time-picker.js`
+ * `dist/react-time-picker.min.js`
+
+you need to make sure you have `React` global var set
+
+If you use the `.nomoment` files
+
+* `dist/react-time-picker.nomoment.js`
+* `dist/react-time-picker.nomoment.min.js`
+
+you need to make sure you have both `React` and `moment` global vars set.
+
 ## Properties
@@ -45,3 +63,3 @@
  * defaultValue: String - a time value - for uncontrolled behavior
- * onChange: Function(string) - function to be called on change
+ * onChange: Function(string, moment) - function to be called on change
 
@@ -54,10 +72,12 @@ ### Formatting
 
- * format: String - a format that dictates which parts of the time picker are displayed.
- 	Valid parts are:
+ * format: String - See http://momentjs.com/docs/#/parsing/string-format/. A format that dictates which parts of the time picker are displayed.
 
- 	 * H or HH - for hour and double digit hour
- 	 * m or mm - for minute and double digit minute
- 	 * s or ss - for second and double digit second
- 	 * a or A  - for meridian display
+ 	Valid format tokens are:
 
+     * H or HH - 0..23 - 24 hour time (hour and double digit hour)
+ 	 * h or hh - 1..12 - 12 hour time used with `a A`
+ 	 * m or mm - 0..59 for minute and double digit minute
+ 	 * s or ss - 0..59 for second and double digit second
+ 	 * a or A  - for meridiem display
+
 So you can decide what to display either by specifying a `format` or just use the appropriate formatting on the `value` you provide.
@@ -144,6 +164,5 @@
 $ npm install
-$ npm run dev # to run webpack-dev-server
-$ npm run serve # to run a web server to serve your files
+$ npm run dev
 ```
-Navigate to [localhost:9091](http://localhost:9091).
+Navigate to [localhost:8080](http://localhost:8080).
 
@@ -150,0 +169,0 @@ Change the sources in the `src` directory. When a change is detected, the browser is auto refreshed.

src/getFormatInfo.js

@@ -6,2 +6,3 @@ 'use strict';
 		var specified = false
+		var full = false
 
@@ -17,2 +18,3 @@ var index = format.indexOf('h')
 			index = format.indexOf('H')
+			full = true
 			if (~index){
@@ -27,2 +29,3 @@ specified = true
 		return {
+			full: full,
 			len: len,
@@ -58,3 +61,3 @@ specified: specified
 			specified = true
-			if (format.charAt(index+1) == 's'){
+			if (format.charAt(index + 1) == 's'){
 				len++
@@ -61,0 +64,0 @@ }

src/index.jsx

@@ -1,11 +0,13 @@
-'use strict';
+'use strict'
 
-var React       = require('react')
-var assign      = require('object-assign')
-var normalize   = require('react-style-normalizer')
+var React     = require('react')
+var assign    = require('object-assign')
+var normalize = require('react-style-normalizer')
+var moment    = require('moment')
 
-var parseTime    = require('./parseTime')
-var updateTime   = require('./updateTime')
 var toUpperFirst = require('./toUpperFirst')
 
+var getFormat     = require('./getFormat')
+var getFormatInfo = require('./getFormatInfo')
+
 var hasTouch = require('has-touch')
@@ -20,3 +22,2 @@
 var twoDigits     = require('./twoDigits')
-var getFormatInfo = require('./getFormatInfo')
 var format        = require('./format')
@@ -126,3 +127,3 @@ var formatTime    = require('./formatTime')
 			defaultMeridianInputProps: {
-				readOnly: true
+				// readOnly: true
 			},
@@ -246,3 +247,6 @@
 	onMeridianInputMouseDown: function(props, event){
+		//prevent focus on mouse down on meridian input
 		event.preventDefault()
+		//the input can still be focused by tab navigation, we're okay with that
+
 		this.onArrowMeridianAction(props, 1, 'meridian')
@@ -252,11 +256,3 @@ },
 	onArrowMeridianAction: function(props, dir, name){
-		var currentMeridian = this.time.meridian
-		var lowercase = currentMeridian == 'am' || currentMeridian == 'pm'
-
-		var newValue = lowercase?
-							currentMeridian == 'am'? 'pm': 'am'
-							:
-							currentMeridian == 'AM'? 'PM': 'AM'
-
-		this.updateValue(name, newValue)
+		this.addTime('hour', dir * 12)
 	},
@@ -283,31 +279,49 @@
 	incValue: function(props, name, dir){
-		dir = dir || 0
 
-		var step     = props[name + 'Step'] || props.step
-		var amount   = dir * step
-		var time     = this.time
-		var oldValue = time[name]
-		var newValue = oldValue + amount
+		var fieldFocused = this.state.focused[name]
 
-		// this.setValue(time)
-		this.updateValue(name, newValue)
+		if (!fieldFocused || this.lastStateChange != name){
+			dir = dir || 0
+
+			var step     = props[name + 'Step'] || props.step
+			var amount   = dir * step
+
+			this.addTime(name, amount)
+
+		} else {
+
+			var value = parseInt(fieldFocused.value, 10)
+
+			value += dir
+
+			if (name == 'hour'){
+				if (props.time.meridian == 'PM'){
+					value += value < 12? 12: 0
+				}
+			}
+
+			this.setTime(name, value)
+		}
+
+		this.lastStateChange = null
 	},
 
-	updateValue: function(name, newValue, config){
-		this.setValue(this.updateTime(name, newValue, config))
+	addTime: function(name, amount){
+		this.setValue(
+			moment(this.moment).add(amount, name)
+		)
 	},
 
-	updateTime: function(name, newValue, config){
-		config = config || {}
-		config.overflowHourToMeridian = this.props.overflowHourToMeridian
+	setTime: function(name, value){
+		var clone = moment(this.moment)
+		clone.set(name, value)
 
-		var time = this.time
+		this.setValue(clone)
+	},
 
-		time = updateTime(time, name, newValue, config)
+	setValue: function(moment){
 
-		return this.time = time
-	},
+		var props = this.p
+		var time  = this.getTime(moment)
 
-	setValue: function(time){
-
 		var focused  = this.state.focused
@@ -319,3 +333,3 @@ var newState = {}
 				if (focused[key]){
-					focused[key].value = this.format(this.props, key, time[key])
+					focused[key].value = this.format(props, key, time[key])
 				}
@@ -325,9 +339,11 @@ }, this)
 
+		var timeString = moment.format(props.format)
+
 		if (this.props.value == null){
 			this.setState({
-				defaultValue: time
+				defaultValue: timeString
 			})
 		}
 
-		;(this.props.onChange || emptyFn)(this.props.timeToString(time, this.props.format), assign({}, time))
+		;(this.props.onChange || emptyFn)(timeString, moment, assign({}, time))
 	},
@@ -349,3 +365,3 @@
 		if (!renderFn && typeof props.format == 'string'){
-			var formatInfo = this.formatInfo
+			var formatInfo = props.formatInfo
 			renderFn = function(value, name){
@@ -498,11 +514,6 @@ return format(name, value, formatInfo)
 
+		this.incValue(props, name, 0)
+
 		this.state.focused[name] = null
 		this.setState({})
-
-		var time
-		var value = event.target.value * 1
-
-		this.updateValue(name, value, {
-			clamp: props.clamp
-		})
 	},
@@ -515,2 +526,4 @@
 
+		this.lastStateChange = name
+
 		this.setState({})
@@ -520,49 +533,120 @@ props.stopChangePropagation && event.stopPropagation()
 
+  	/**
+  	 * Called on keydown on all inputs, including meridian
+  	 *
+  	 * @param  {Object} props
+  	 * @param  {String} name
+  	 * @param  {Event} event
+  	 */
   	handleInputKeyDown: function(props, name, event){
 
-    	if (event.key === 'ArrowDown') {
-      		this.incValue(props, name, -1)
+    	if (name == 'meridian'){
+			var letter           = String.fromCharCode(event.keyCode)
+			var isMeridianLetter = (letter == 'A' || letter == 'P')
+
+    		if (
+    			isMeridianLetter
+    			||
+    			(event.key == ' ')//space
+    			||
+    			(event.key == 'Enter')
+    			||
+    			(event.key == 'ArrowUp')
+    			||
+    			(event.key == 'ArrowDown')
+    			||
+    			(event.key == 'ArrowLeft')
+    			||
+    			(event.key == 'ArrowRight')
+    		){
+
+    			event.preventDefault()
+
+	    		if (isMeridianLetter && (letter + 'M' == this.time.meridian)){
+	    			return
+	    		}
+
+    			this.addTime('hour', 12)
+    			return
+    		}
     	}
 
-    	if (event.key === 'ArrowUp') {
-      		this.incValue(props, name, 1)
-    	}
+		if (event.key === 'ArrowDown') {
+	  		this.incValue(props, name, -1)
+		}
+
+		if (event.key === 'ArrowUp') {
+	  		this.incValue(props, name, 1)
+		}
   	},
 
-	getTime: function(){
-		var strict = this.props.strict
+  	renderHour: function(props) {
+  		return this.renderBox(props, 'hour')
+  	},
 
-		var formatInfo = this.formatInfo = getFormatInfo(this.props.format)
+  	renderMinute: function(props) {
+  		if (props.showMinute){
+  			return this.renderBox(props, 'minute')
+  		}
+  	},
 
-		return parseTime(this.getValue(), {
-			strict: strict,
+  	renderSecond: function(props) {
+  		if (props.showSecond){
+  			return this.renderBox(props, 'second')
+  		}
+  	},
 
-			hour    : formatInfo.hour,
-			minute  : formatInfo.minute,
-			second  : formatInfo.second,
-			meridian: formatInfo.meridian
-		})
-	},
+  	renderMeridian: function(props) {
+  		if (props.withMeridian){
+  			return this.renderBox(props, 'meridian')
+  		}
+  	},
 
-	prepareTime: function(props, state) {
-		var timeValue  = this.getTime()
-		var formatInfo = this.props.format?
-							this.formatInfo:
-							null
+  	toMoment: function(value, format){
+  		format = format || this.prepareFormat(this.props)
 
-		props.showSecond = formatInfo?
-								formatInfo.second.specified:
-								timeValue.second !== undefined
+  		return moment(value, format)
+  	},
 
-		props.showMinute = formatInfo?
-								formatInfo.minute.specified:
-								timeValue.minute !== undefined
+	getTime: function(moment){
 
-		props.withMeridian = formatInfo?
-								formatInfo.meridian.specified:
-								timeValue.meridian != null
+		var formatInfo = this.p.formatInfo
+		var time       = {}
 
-		return timeValue
+		if (formatInfo.hour.specified){
+			time.hour = formatInfo.meridian.specified?
+							moment.format('h') * 1:
+							moment.hour()
+		}
+
+		if (formatInfo.minute.specified){
+			time.minute = moment.minute()
+		}
+
+		if (formatInfo.second.specified){
+			time.second = moment.second()
+		}
+
+		if (formatInfo.meridian.specified){
+			time.meridian = moment.format('A')
+		}
+
+		return time
 	},
 
+	prepareFormat: function(props){
+		var value  = props.value
+		var format = props.format || getFormat(value) || 'HH:mm:ss'
+
+		return format
+	},
+
+	prepareBoxes: function(props) {
+		var formatInfo = props.formatInfo
+
+		props.showSecond = formatInfo.second.specified
+		props.showMinute = formatInfo.minute.specified
+		props.withMeridian = formatInfo.meridian.specified
+	},
+
 	getValue: function() {
@@ -576,28 +660,13 @@ var value = this.props.value == null?
 
-	renderHour: function(props) {
-		return this.renderBox(props, 'hour')
-	},
+	prepareProps: function(thisProps, state) {
+		var props = this.p = assign({}, thisProps)
 
-	renderMinute: function(props) {
-		if (props.showMinute){
-			return this.renderBox(props, 'minute')
-		}
-	},
+		props.value  = this.getValue()
+		props.format = this.prepareFormat(props)
+		props.formatInfo = getFormatInfo(props.format)
 
-	renderSecond: function(props) {
-		if (props.showSecond){
-			return this.renderBox(props, 'second')
-		}
-	},
+		this.moment = props.moment = this.toMoment(props.value, props.format)
+		this.time   = props.time   = this.getTime(props.moment)
 
-	renderMeridian: function(props) {
-		if (props.withMeridian){
-			return this.renderBox(props, 'meridian')
-		}
-	},
-
-	prepareProps: function(thisProps, state) {
-		var props = assign({}, thisProps)
-
-		this.time = props.time = this.prepareTime(props, state)
+		this.prepareBoxes(props, state)
 		this.prepareStyles(props, state)
@@ -604,0 +673,0 @@

src/parseTime.js

@@ -65,10 +65,10 @@ 'use strict';
 
-		if (config.strict && value.meridian && value.hour === 12){
-			if (value.minute !== undefined){
-				value.minute = 0
-			}
-			if (value.second !== undefined){
-				value.second = 0
-			}
-		}
+		// if (config.strict && value.meridian && value.hour === 12){
+		// 	if (value.minute !== undefined){
+		// 		value.minute = 0
+		// 	}
+		// 	if (value.second !== undefined){
+		// 		value.second = 0
+		// 	}
+		// }
 	}
@@ -75,0 +75,0 @@

webpack.config.js

 module.exports = {
     entry: './index.jsx',
     output: {
-        publicPath: 'http://localhost:9090/assets'
+        publicPath: '/assets'
     },
@@ -6,0 +6,0 @@ module: {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

779314

increased by516.17%

Number of package files

53

increased by55.88%

Lines of code

16237

increased by380.38%

Number of lines in readme file

179

increased by11.88%

Worsened metrics

Dev dependency count

11

increased by10%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmoment@2.30.1(transitive)

• - Removedparse-time@^0.1.1

• - Removedparse-time@0.1.4(transitive)