# @texada/date-picker

> A bootstrap datetime picker component for React.js

Latest version **0.11.4** (published 2020-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @texada/date-picker
pnpm add @texada/date-picker
yarn add @texada/date-picker
bun add @texada/date-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.11.4 |
| Published | 2020-04-01 |
| First published | 2018-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 371.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Loïc CHOLLIER |
| Maintainers | fil1994, kassey, texada-user |
| Keywords | react, react-component, bootstrap, datetimepicker, datetime |

## Links

- npm: https://www.npmjs.com/package/@texada/date-picker
- Repository: https://github.com/Texada/react-bootstrap-datetimepicker
- Homepage: https://quirky-almeida-9a2543.netlify.com/
- Issues: https://github.com/Texada/react-bootstrap-datetimepicker/issues
- npm.io page: https://npm.io/package/@texada/date-picker

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.11.4 (latest) — 2020-04-01
- 0.11.2-beta (beta) — 2020-03-27
- 0.11.3 — 2020-04-01
- 0.11.2 — 2020-03-31
- 0.11.1 — 2020-03-26
- 0.11.0 — 2020-03-19
- 0.10.0 — 2020-03-18
- 0.9.0 — 2019-11-27
- 0.8.5-beta — 2019-11-27
- 0.8.4 — 2019-11-11
- 0.8.3 — 2019-08-07
- 0.8.2 — 2019-08-06
- 0.8.1 — 2019-05-29
- 0.8.0 — 2019-05-27
- 0.7.1 — 2019-05-17
- … 25 more at https://npm.io/package/@texada/date-picker/versions

## README

# @texada/date-picker

 ![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)
 [![npm (scoped)](https://img.shields.io/npm/v/@texada/date-picker.svg?style=flat-square) ![](https://img.shields.io/badge/react-%3E%3D%2016.1.0-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/@texada/date-picker)
 ![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@texada/date-picker.svg?style=flat-square)

[![Netlify Status](https://api.netlify.com/api/v1/badges/fd8eaa2d-ed90-4761-87b9-0e57c60f4e5e/deploy-status)](https://app.netlify.com/sites/quirky-almeida-9a2543/deploys)

This project is a fork of https://github.com/quri/react-bootstrap-datetimepicker

This project is a port of https://github.com/Eonasdan/bootstrap-datetimepicker for React.js

## Usage

Installation:

```bash
npm install @texada/date-picker
```

Then:

```js
import DateTimeField from "@texada/date-picker";
import "@texada/date-picker/dist/styles.min.css";

...

render() {
  return <DateTimeField />;
}
```

See [Examples](https://github.com/Texada/react-bootstrap-datetimepicker/tree/portal/examples) for more details.

## API

### DateTimeField

| Name         | Type    | Default | Description |
| ------------ | ------- | ------- | ----------- |
| **dateTime** | string  | moment().format('x') | Represents the inital dateTime, this string is then parsed by moment.js |
| **format**   | string  | "x"     | Defines the format moment.js should use to parse and output the date to onChange |
| **inputFormat** | string | "MM/DD/YY h:mm A" | Defines the way the date is represented in the HTML input. It must be a format understanable by moment.js |
| **onChange** | function | x => console.log(x) | Callback trigger when the date changes. `x` is the new datetime value. |
| **showToday** | boolean | true | Highlights today's date |
| **size** | string | "md" | Changes the size of the date picker input field. Sizes: "sm", "md", "lg" |
| **daysOfWeekDisabled** | array of integer | [] | Disables clicking on some days. Goes from 0 (Sunday) to 6 (Saturday). |
| **viewMode** | string or number | 'days' | The default view to display when the picker is shown. ('years', 'months', 'days') |
| **inputProps** | object | undefined | Defines additional attributes for the input element of the component. |
| **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. |
| **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. |
| **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') |
| **defaultText** | string | {dateTime} | Sets the initial value. Could be an empty string, or helper text. |
| **zIndex** | number | 4000 | Defines the z-index of the modal overlay |
| **disabled** | boolean | false | Disables the date picker |
| **hasError** | boolean | false | Makes input box red |
| **label** | string | undefined | Label for input |
| **shouldValidate** | boolean | false | Makes input box red and shows error message when input is invalid |
| **required** | boolean | false | Displays a red "*"" on the label |
| **hasError** | boolean | false | Makes input box red |
| **id** | string | (auto-generated) | The id for the date input |

---
_Source: https://npm.io/package/@texada/date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._