add disableFuture

Author: GuillaumeRx

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "r1H34qFTVIm2D+PzqxIk+VTnYto8v9QNuEFtCZ4qxQU=",
+    "shasum": "D29cn7Em818Oa6tWZ8/lJM551czEl2LZTFkVdEKV/ng=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/src/components/InteractiveForm.tsx

@@ -104,7 +104,27 @@ export const InteractiveForm: SnapComponent<{ disabled?: boolean }> = ({
             </Selector>
           </Field>
           <Field label="Example DateTimePicker">
-            <DateTimePicker name="example-datetime" />
+            <DateTimePicker
+              name="example-datetime"
+              disablePast={true}
+              placeholder="Select a date and time"
+            />
+          </Field>
+          <Field label="Example DatePicker">
+            <DateTimePicker
+              name="example-date"
+              type="date"
+              placeholder="Select a date"
+              disablePast={true}
+            />
+          </Field>
+          <Field label="Example TimePicker">
+            <DateTimePicker
+              name="example-time"
+              type="time"
+              placeholder="Select a time"
+              disablePast={true}
+            />
           </Field>
         </Form>
       </Box>

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.test.tsx

@@ -48,6 +48,8 @@ describe('DateTimePicker', () => {
         placeholder="Select date and time"
         disabled={true}
         value="2024-01-01T12:00Z"
+        disablePast={false}
+        disableFuture={true}
       />
     );
 
@@ -59,6 +61,8 @@ describe('DateTimePicker', () => {
         placeholder: 'Select date and time',
         disabled: true,
         value: '2024-01-01T12:00Z',
+        disablePast: false,
+        disableFuture: true,
       },
       key: null,
     });

packages/snaps-sdk/src/jsx/components/form/DateTimePicker.ts

@@ -11,13 +11,17 @@ import { createSnapComponent } from '../../component';
  * Defaults to 'datetime'.
  * @property placeholder - The placeholder text of the date/time picker field.
  * @property disabled - Whether the date/time picker field is disabled.
+ * @property disablePast - Whether to allow selection of past dates. Defaults to false.
+ * @property disableFuture - Whether to allow selection of future dates. Defaults to false.
  */
 export type DateTimePickerProps = {
   name: string;
   value?: string | undefined;
   type?: 'date' | 'time' | 'datetime' | undefined;
   placeholder?: string | undefined;
   disabled?: boolean | undefined;
+  disablePast?: boolean | undefined;
+  disableFuture?: boolean | undefined;
 };
 
 const TYPE = 'DateTimePicker';
@@ -33,6 +37,8 @@ const TYPE = 'DateTimePicker';
  * Defaults to 'datetime'.
  * @param props.placeholder - The placeholder text of the date/time picker field.
  * @param props.disabled - Whether the date/time picker field is disabled.
+ * @param props.disablePast - Whether to allow selection of past dates. Defaults to false.
+ * @param props.disableFuture - Whether to allow selection of future dates. Defaults to false.
  */
 export const DateTimePicker = createSnapComponent<
   DateTimePickerProps,

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -1021,12 +1021,15 @@ describe('DateTimePickerStruct', () => {
     <DateTimePicker name="foo" type="time" />,
     <DateTimePicker name="foo" value={new Date().toISOString()} />,
     <DateTimePicker name="foo" disabled={true} />,
+    <DateTimePicker name="foo" disablePast={false} />,
+    <DateTimePicker name="foo" disableFuture={true} />,
     <DateTimePicker
       name="foo"
       value={new Date().toISOString()}
       placeholder="foobar"
       type="datetime"
       disabled={true}
+      disablePast={true}
     />,
   ])('validates a date time picker element', (value) => {
     expect(is(value, DateTimePickerStruct)).toBe(true);

packages/snaps-sdk/src/jsx/validation.ts

@@ -394,6 +394,8 @@ export const DateTimePickerStruct: Describe<DateTimePickerElement> = element(
     ),
     placeholder: optional(string()),
     disabled: optional(boolean()),
+    disablePast: optional(boolean()),
+    disableFuture: optional(boolean()),
     value: optional(ISO8601DateStruct),
   },
 );