react-datetime-picker - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

dist/DateTimeInput.js

@@ -267,3 +267,3 @@ "use strict";
       var value = input.value;
-      var max = parseInt(input.getAttribute('max'), 10);
+      var max = input.getAttribute('max');
       /**
@@ -276,3 +276,3 @@ * Given 1, the smallest possible number the user could type by adding another digit is 10.
 
-      if (value * 10 > max) {
+      if (value * 10 > max || value.length >= max.length) {
         var property = 'nextElementSibling';
@@ -279,0 +279,0 @@ var nextInput = findInput(input, property);

package.json

 {
   "name": "react-datetime-picker",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "A date range picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

README.md

@@ -111,3 +111,3 @@ [![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetime-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
 |maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
-|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"month"`|`"year"`|
+|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)!|`"minute"`|`"second"`|
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
@@ -114,0 +114,0 @@ |minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|

src/DateTimeInput.jsx

@@ -418,3 +418,3 @@ import React, { PureComponent } from 'react';
     const { value } = input;
-    const max = parseInt(input.getAttribute('max'), 10);
+    const max = input.getAttribute('max');
 
@@ -427,3 +427,3 @@ /**
      */
-    if (value * 10 > max) {
+    if ((value * 10 > max) || (value.length >= max.length)) {
       const property = 'nextElementSibling';
@@ -430,0 +430,0 @@ const nextInput = findInput(input, property);

src/DateTimeInput.spec.jsx

@@ -855,3 +855,3 @@ import React from 'react';
 
-  it('jumps to the next field when a value which can\'t be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value which can\'t be extended to another valid value is entered', () => {
     const component = mount(
@@ -873,3 +873,3 @@ <DateTimeInput {...defaultProps} />
 
-  it('does not jump the next field when a value which can be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
     const component = mount(
@@ -881,4 +881,21 @@ <DateTimeInput {...defaultProps} />
     const dayInput = customInputs.at(0);
+    const monthInput = customInputs.at(1);
 
     dayInput.getDOMNode().focus();
+    dayInput.getDOMNode().value = '03';
+
+    dayInput.simulate('keyup', { target: dayInput.getDOMNode(), key: '3' });
+
+    expect(document.activeElement).toBe(monthInput.getDOMNode());
+  });
+
+  it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
+    const component = mount(
+      <DateTimeInput {...defaultProps} />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+    const dayInput = customInputs.at(0);
+
+    dayInput.getDOMNode().focus();
     dayInput.getDOMNode().value = '1';
@@ -885,0 +902,0 @@

src/DateTimePicker.spec.jsx

@@ -31,2 +31,12 @@ import React from 'react';
 
+  it('passes autoFocus flag to DateTimeInput', () => {
+    const component = mount(
+      <DateTimePicker autoFocus />
+    );
+
+    const dateTimeInput = component.find('DateTimeInput');
+
+    expect(dateTimeInput.prop('autoFocus')).toBeTruthy();
+  });
+
   it('passes disabled flag to DateTimeInput', () => {
@@ -33,0 +43,0 @@ const component = mount(

No alert changes

Improved metrics

Total package byte prevSize

175776

increased by0.52%

Lines of code

4294

increased by0.44%

No dependency changes