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

react-datetime

Package Overview
Dependencies
Maintainers
3
Versions
83
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datetime - npm Package Compare versions

Comparing version 2.11.1 to 2.12.0

3

CHANGELOG.md
Changelog
=========
## 2.12.0
* The `renderInput` prop now receives `closeCalendar` function as well
## 2.11.1

@@ -4,0 +7,0 @@ * The open prop should now work as intended

2

DateTime.js

@@ -431,3 +431,3 @@ 'use strict';

if ( this.props.renderInput ) {
children = [ React.createElement('div', { key: 'i' }, this.props.renderInput( finalInputProps, this.openCalendar )) ];
children = [ React.createElement('div', { key: 'i' }, this.props.renderInput( finalInputProps, this.openCalendar, this.closeCalendar )) ];
} else {

@@ -434,0 +434,0 @@ children = [ React.createElement('input', assign({ key: 'i' }, finalInputProps ))];

{
"name": "react-datetime",
"version": "2.11.1",
"version": "2.12.0",
"description": "A lightweight but complete datetime picker React.js component.",

@@ -23,3 +23,3 @@ "homepage": "https://github.com/YouCanBookMe/react-datetime",

"dev": "./node_modules/.bin/webpack-dev-server --config example/webpack.config.js --devtool eval --progress --colors --hot --content-base example",
"lint": "./node_modules/.bin/eslint src/ DateTime.js test/",
"lint": "./node_modules/.bin/eslint src/ DateTime.js test/ && echo 'Linting OK!'",
"test": "./node_modules/.bin/jest",

@@ -26,0 +26,0 @@ "test:typings": "./node_modules/.bin/tsc -p ./typings",

@@ -59,4 +59,4 @@ # react-datetime

| **inputProps** | `object` | `undefined` | Defines additional attributes for the input element of the component. For example: `onClick`, `placeholder`, `disabled`, `required`, `name` and `className` (`className` *sets* the class attribute for the input element). See [Customize the Input Appearance](#customize-the-input-appearance). |
| **renderInput** | `function` | `undefined` | Replace the rendering of the input element. The accepted function has `openCalendar` (a function which opens the calendar) and the default calculated `props` for the input. Must return a React component or `null`. See [Customize the Input Appearance](#customize-the-input-appearance). |
| **isValidDate** | `function` | `() => true` | Define the dates that can be selected. The function receives `(currentDate, selectedDate)` and shall return a `true` or `false` whether the `currentDate` is valid or not. See [selectable dates](#selectable-dates).|
| **renderInput** | `function` | `undefined` | Replace the rendering of the input element. The function has the following arguments: the default calculated `props` for the input, `openCalendar` (a function which opens the calendar) and `closeCalendar` (a function which closes the calendar). Must return a React component or `null`. See [Customize the Input Appearance](#customize-the-input-appearance). |
| **renderDay** | `function` | `DOM.td(day)` | Customize the way that the days are shown in the daypicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, and must return a React component. See [Customize the Datepicker Appearance](#customize-the-datepicker-appearance). |

@@ -101,3 +101,3 @@ | **renderMonth** | `function` | `DOM.td(month)` | Customize the way that the months are shown in the monthpicker. The accepted function has the `selectedDate`, the current date and the default calculated `props` for the cell, the `month` and the `year` to be shown, and must return a React component. See [Customize the Datepicker Appearance](#customize-the-datepicker-appearance). |

},
renderInput: function( props, openCalendar ){
renderInput: function( props, openCalendar, closeCalendar ){
function clear(){

@@ -110,2 +110,3 @@ props.onChange({target: {value: ''}});

<button onClick={openCalendar}>open calendar</button>
<button onClick={closeCalendar}>close calendar</button>
<button onClick={clear}>clear</button>

@@ -150,3 +151,3 @@ </div>

You can filter out what you want the user to be able to pick by using `dateFormat` and `timeFormat`, e.g. to create a timepicker, yearpicker etc.
In this example the component is being used as a *timepicker* and can *only be used for selecting a time*.

@@ -153,0 +154,0 @@ ```js

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc