react-tailwindcss-datetimepicker - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

dist/index.d.ts

@@ -1,7 +0,26 @@
-import type { CSSProperties } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import type { Moment } from 'moment-timezone';
+import type { Moment } from 'moment';
 import { default as React_2 } from 'react';
 import type { ReactNode } from 'react';
 
+declare type ClassNames = {
+    rootContainer?: string;
+    rangesContainer?: string;
+    rangeButtonDefault?: string;
+    rangeButtonSelected?: string;
+    fromToRangeContainer?: string;
+    normalCell?: string;
+    normalCellHover?: string;
+    greyCell?: string;
+    invalidCell?: string;
+    startCell?: string;
+    endCell?: string;
+    withinRangeCell?: string;
+    startDot?: string;
+    endDot?: string;
+    footerContainer?: string;
+    applyButton?: string;
+    cancelButton?: string;
+};
+
 declare const customRange: {
@@ -59,3 +78,3 @@ readonly 'Custom Range': "Custom Range";
     end: Moment;
-    local: Locale;
+    locale: Locale;
     applyCallback: (start: Moment, end: Moment) => void;
@@ -69,3 +88,2 @@ rangeCallback?: (index: number, value: keyof PresetDateRanges) => void;
     pastSearchFriendly?: boolean;
-    darkMode?: boolean;
     noMobileMode?: boolean;
@@ -77,3 +95,4 @@ forceMobileMode?: boolean;
     centerMode?: boolean;
-    style?: Style;
+    classNames?: ClassNames;
+    displayMaxDate?: boolean;
     children: ReactNode;
@@ -84,26 +103,4 @@ }
     visible: boolean;
-    x: number;
-    y: number;
-    screenWidthToTheRight: number;
-    containerClassName: string;
 }
 
-declare type Style = {
-    hoverCell?: boolean;
-    borderRadius: string;
-    borderColour: string;
-    color: string;
-    backgroundColor: string;
-    cursor?: string;
-    opacity?: string;
-    fromDate?: React.CSSProperties;
-    toDate?: React.CSSProperties;
-    betweenDates?: React.CSSProperties;
-    toDot?: React.CSSProperties;
-    fromDot?: React.CSSProperties;
-    customRangeButtons?: React.CSSProperties;
-    customRangeSelected?: React.CSSProperties;
-    standaloneLayout?: CSSProperties;
-};
-
 export { }

package.json

 {
   "name": "react-tailwindcss-datetimepicker",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "type": "module",
@@ -38,4 +38,3 @@ "files": [
     "clsx": "^2.0.0",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43"
+    "moment": "^2.29.4"
   },
@@ -60,2 +59,3 @@ "devDependencies": {
     "typescript": "^5.3.2",
+    "usehooks-ts": "^2.9.1",
     "vite": "^5.0.4",
@@ -62,0 +62,0 @@ "vite-plugin-dts": "^3.6.4",

README.md

@@ -7,5 +7,6 @@ # 📦 React TailwindCSS Date and Time Picker
 - ✅ Selection of times for the selected range
-- ✅ Personalized range presets for faster selection (e.g.: Yesterday, last months etc.)
+- ✅ Customizable range presets for faster selection (e.g.: Yesterday, last months etc.)
 - ✅ Keyboard navigation for accessibility
 - ✅ TypeScript support
+- ✅ Out of the box Dark Mode support
 
@@ -42,2 +43,4 @@ This project is a fork of [react-datetimepicker](https://github.com/v0ltoz/react-datetimepicker) with **significant alterations** including:
 - [Production](#production)
+- [Breaking changes in v2](#breaking-changes-in-v2)
+  * [Upgrading from `1.x.x to ` to `2.x.x`](#upgrading-from-1xx-to--to-2xx)
 - [Roadmap](#roadmap)
@@ -89,3 +92,3 @@ - [License](#license)
 import DateTimePicker from 'react-tailwindcss-datetimepicker';
-import moment, { type Moment } from 'moment-timezone';
+import moment, { type Moment } from 'moment';
 
@@ -109,3 +112,3 @@ function App() {
       end={range.end}
-      local={{
+      locale={{
         format: 'DD-MM-YYYY HH:mm',
@@ -137,3 +140,3 @@ sundayFirst: false,
 import DateTimePicker from 'react-tailwindcss-datetimepicker';
-import moment, { type Moment } from 'moment-timezone';
+import moment, { type Moment } from 'moment';
 
@@ -171,3 +174,3 @@ class App extends React.Component {
     };
-    const local = {
+    const locale = {
       format: 'DD-MM-YYYY HH:mm',
@@ -182,3 +185,3 @@ sundayFirst: false,
         end={this.state.end}
-        local={local}
+        locale={locale}
         maxDate={maxDate}
@@ -211,3 +214,3 @@ applyCallback={this.applyCallback}
 | [`end`](#end)                               | **Required** | `Moment Date` | `undefined`  | Initial end Date set in the picker                                             |
-| [`local`](#local)                           | **Required** | `Object`      | `undefined`  | locale format for date labels                                                  |
+| [`locale`](#locale)                         | **Required** | `Object`      | `undefined`  | locale format for date labels                                                  |
 | [`applyCallback`](#applycallback)           | **Required** | `Function`    | `null`       | Function which is called when the apply button is clicked                      |
@@ -221,3 +224,2 @@ | [`rangeCallback`](#rangecallback)           | optional     | `Function`    | `null`       | Function which is called when one of the preset ranges is clicked              |
 | [`pastSearchFriendly`](#pastsearchfriendly) | optional     | `Boolean`     | `false`      | Optimize calendar for past searches                                            |
-| [`darkMode`](#darkmode)                     | optional     | `Boolean`     | `false`      | Changes UI to dark                                                             |
 | [`noMobileMode`](#nomobilemode)             | optional     | `Boolean`     | `false`      | Picker will always be displayed in full screen mode                            |
@@ -229,2 +231,4 @@ | [`forceMobileMode`](#forcemobilemode)       | optional     | `Boolean`     | `false`      | Picker will always be displayed in condensed mode all the time                 |
 | [`centerMode`](#centermode)                 | optional     | `Boolean`     | `false`      | Picker will open in center                                                     |
+| [`displayMaxDate`](#displaymaxdate)         | optional     | `Boolean`     | `false`      | Will display Max Date in picker footer                                         |
+| [`classNames`](#classnames)             | optional     | `Object`      | `undefined`  | Will override classNames for different parts of the picker
 
@@ -263,3 +267,3 @@ ### `ranges`
 
-### `local`
+### `locale`
 
@@ -375,8 +379,2 @@ (Required)
 
-### `darkMode`
-
-(optional) `boolean` defaults to `false`
-
-Changes the DateTimePicker to be in Dark Mode.
-
 ### `noMobileMode`
@@ -390,3 +388,3 @@
 
-(optional) `boolean`
+(optional) `boolean` defaults to `false`
 
@@ -403,3 +401,3 @@ When set the mobile breakpoint to be ignored. Picker will always be displayed in condensed mode all the time.
 
-(optional) `boolean`
+(optional) `boolean` defaults to `false`
 
@@ -410,3 +408,3 @@ When set the picker will be open by default.
 
-(optional) `boolean`
+(optional) `boolean` defaults to `true`
 
@@ -417,6 +415,45 @@ When set and changed the picker will open to the left (right to left) instead of the default which is to open to the right (left to right)
 
-(optional) `boolean`
+(optional) `boolean` defaults to `false`
 
 To allow flexibility, center mode has been added where leftMode or default is not enough.
 
+### `displayMaxDate`
+
+(optional) `boolean` defaults to `false`
+
+To allow flexibility, center mode has been added where leftMode or default is not enough.
+
+### `classNames`
+
+(optional) `object`
+
+Will add extra classNames to different parts of the picker. It's great for for tailoring the component to match your preferred look and feel. The object has the following keys:
+- `rootContainer`
+- `rangesContainer`
+- `rangeButtonDefault`
+- `rangeButtonSelected`
+- `fromToRangeContainer`
+- `normalCell`
+- `normalCellHove`
+- `greyCel`
+- `invalidCel`
+- `startCel`
+- `endCel`
+- `withinRangeCel`
+- `startDot`
+- `endDot`
+- `footerContainer`
+- `applyButton`
+- `cancelButton`
+
+By providing CSS `className`(s) for these keys, you can customize/override them.
+
+**Note:** If you're already using TailwindCSS in your project, you can use the `!` operand for overriding an already exisiting className. (Just like `!important` in regular CSS) For example:
+```tsx
+classNames={{
+  rootContainer: '!bg-red-700'
+}}
+```
+
+
 ## Development
@@ -441,6 +478,13 @@ Runs the app in the development mode.
 
+## Breaking changes in v2
+If you're upgrading from `1.x.x to ` to `2.x.x`:
+- `local` prop has been renamed to [`locale`](#locale)
+- `style` prop has been removed in favor of [`classNames`](#classnames)
+- `darkMode` prop has been removed. All UI elements of the picker now have dark styles defined for them. If you add `className=dark` to your `<body>` tag (or any other parent element of it), dark mode will be automatically turned on.
+
+
 ## Roadmap
 
 - [x] Support TypeScript
-- [ ] The ability to add custom CSS classes for different parts of the component
+- [x] Ability to add custom CSS classes for different parts of the component
 - [ ] Migrate to [date-fns](https://www.npmjs.com/package/date-fns)
@@ -447,0 +491,0 @@ - [ ] Write more tests

No alert changes

Improved metrics

Total package byte prevSize

374521

increased by1.67%

Dependency count

4

decreased by-20%

Number of lines in readme file

479

increased by10.11%

Worsened metrics

Dev dependency count

21

increased by5%

Lines of code

5066

decreased by-0.06%

Dependency changes

• - Removedmoment-timezone@^0.5.43

• - Removedmoment-timezone@0.5.47(transitive)