Unable to close modal after click on datepicker.

[Bishalsnghd07]

unable to close the modal after getting open when click on ok button, I'm showing you my code, please take a look into it and help me to find out the desire result.

date-picker.tsx component:

'use client';
import { IInput } from '@/models/interfaces';

import { ref } from 'firebase/storage';
import { ReactNode, useEffect } from 'react';
import { Datepicker, Input, initTE } from 'tw-elements';
import HelperText from '../../atoms/helper-text';
import Label from '../label';
// import '../node_modules/tw-elements/dist/js/tw-elements.umd.min.js';

initTE({ Datepicker, Input });
interface InputDatePicker extends IInput {
helperNode?: ReactNode;
[key: string]: any;
}

const InputDatePicker: React.FC = ({
name,
label,
placeholder,
disabled = false,
helperText = ``,
helperNode = null,
tooltipText,
hasError = false,
...rest
}: InputDatePicker) => {
useEffect(() => {
const init = async () => {
const { Datepicker, Input, initTE } = await import('tw-elements');
initTE({ Datepicker, Input });
};
init();
}, []);

// useEffect(() => {
// initTE({ Datepicker, Input });
// }, []);
const inputProps: any = {};
if (disabled) {
inputProps.disabled = true;
}

return (
<>
<fieldset className={flex w-full flex-col pt-2}>

{label}

    <div className="relative mb-3" data-te-datepicker-init data-te-format="mmm d, yyyy">
      <input
        type="text"
        ref={ref}
        name={name}
        id={name}
        aria-labelledby={`${name}-label`}
        className={` block w-full resize-none rounded-5 border px-5 py-3 text-fs-charcoal transition placeholder:text-[#9ca3af]
          ${
            disabled
              ? `cursor-not-allowed border-fs-disabled-field-gray  bg-fs-disabled-field-gray`
              : `border-fs-border-gray focus:border-fs-purple focus:ring-fs-purple`
          }
      
           ${hasError && `border-fs-error-red`}`}
        placeholder="Select a Date"
        {...inputProps}
        {...rest}
      />
      <button
        data-te-datepicker-toggle-ref
        data-te-datepicker-toggle-button-ref
        className="justify-content-center dark:hover:text-primary-400 dark:focus:text-primary-400 absolute right-0.5 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center border-none bg-transparent outline-none hover:text-fs-purple focus:text-fs-purple dark:text-neutral-200 [&>svg]:h-5 [&>svg]:w-5"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path
            fill-rule="evenodd"
            d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </button>
    </div>
    <HelperText hasError={hasError}>{!!helperNode ? helperNode : helperText}</HelperText>
  </fieldset>
</>

);
};

InputDatePicker.displayName = 'InputDatePicker';

export default InputDatePicker;

[Bishalsnghd07]

Please help me to figure this out.. @julien @DanielApt @joshuaballoch @hatashiro @juujisai @ALL

[julien]

No idea what your issue is, you're probably asking the wrong person.

[DanielApt]

I'm not involved in this repository.

[juujisai]

You are calling the initTE method multiple times so most likely whats happening is the component is beeing initialized more than once. Remove the first initTE that is not inside the useEffect and for the second one if the issue still occurs, create some state / ref value that would check whether the initTE method was already called

[Bishalsnghd07]

Last Question, Can I follow this integration setup for Installing and configuring TW elements but I already have one existing plugin, after adding this plugin it overlapping that existing plugin, can you please provide any way to figure it out 👉 https://tw-elements.com/docs/standard/integrations/next-integration/

[juujisai]

You can following this integration tutorial to make the TW elements work in NextJS but as was said in this discussion (#2093) we do not guarantee the compatibility with other UI packages.

[Bishalsnghd07]

Check this code once, am I manually did everything correct or not. So, that it will work in my ui part and close the opened modal after click on ok or cancel button.

date-picker.tsx component:

'use client';
import { IInput } from '@/models/interfaces';

import { ref } from 'firebase/storage';
import { ReactNode, useEffect, useState } from 'react';
import { Datepicker, Input, initTE } from 'tw-elements';
// import HelperText from '../../atoms/helper-text';
import Label from '../label';

// initTE({ Datepicker, Input });
interface InputDatePicker extends IInput {
helperNode?: ReactNode;
[key: string]: any;
}

const InputDatePicker: React.FC = ({
name,
label,
placeholder,
disabled = false,
helperText = ``,
helperNode = null,
tooltipText,
hasError = false,
...rest
}: InputDatePicker) =>
// initTE({ Datepicker, Input })
{
const [isModalOpen, setModalOpen] = useState(false);

const handleOkButtonClick = () => {
  // Your logic for handling "OK" button click
  setModalOpen(false); // Close the modal
};

const handleCancelButtonClick = () => {
  // Your logic for handling "Cancel" button click
  setModalOpen(false); // Close the modal
};

useEffect(() => {
  initTE({ Datepicker, Input });
}, []);

const inputProps: any = {};
if (disabled) {
  inputProps.disabled = true;
}

return (
  <>
    <fieldset className={`flex w-full flex-col pt-2`}>
      <Label htmlFor={name} tooltipText={tooltipText}>
        {label}
      </Label>
      <label
        htmlFor={name}
        className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200"
      ></label>

      <div className="relative mb-3" data-te-datepicker-init data-te-format="mmm d, yyyy">
        <input
          type="text"
          ref={ref}
          name={name}
          id={name}
          aria-labelledby={`${name}-label`}
          className={` block w-full resize-none rounded-5 border px-5 py-3 text-fs-charcoal transition placeholder:text-[#9ca3af]
          ${
            disabled
              ? `cursor-not-allowed border-fs-disabled-field-gray  bg-fs-disabled-field-gray`
              : `border-fs-border-gray focus:border-fs-purple focus:ring-fs-purple`
          }
      
           ${hasError && `border-fs-error-red`}`}
          placeholder={placeholder}
          {...inputProps}
          {...rest}
        />
        <button
          data-te-datepicker-toggle-ref
          data-te-datepicker-toggle-button-ref
          className="justify-content-center dark:hover:text-primary-400 dark:focus:text-primary-400 absolute right-0.5 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center border-none bg-transparent outline-none hover:text-fs-purple focus:text-fs-purple dark:text-neutral-200 [&>svg]:h-5 [&>svg]:w-5"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>
      </div>

      {isModalOpen && (
        <div>
          {/* ... (modal content) */}
          <button onClick={handleOkButtonClick}>OK</button>
          <button onClick={handleCancelButtonClick}>Cancel</button>
        </div>
      )}
      {/* <HelperText hasError={hasError}>{!!helperNode ? helperNode : helperText}</HelperText> */}
    </fieldset>
  </>
);

};

[juujisai]

I copied your code, remove everything that I didn't have access to / variables I didn't have and the datepicker modal is working fine for me. It opens and closes when it should.

the code I used

"use client";

import { useEffect, useState } from "react";
import { Datepicker, Input, initTE } from "tw-elements";

const MyDatepicker = () => {
  const [isModalOpen, setModalOpen] = useState(false);

  const handleOkButtonClick = () => {
    setModalOpen(false); // Close the modal
  };

  const handleCancelButtonClick = () => {
    setModalOpen(false); // Close the modal
  };

  useEffect(() => {
    initTE({ Datepicker, Input });
  }, []);

  return (
    <>
      <fieldset className={`flex w-full flex-col pt-2`}>
        <label className="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200"></label>

        <div
          className="relative mb-3"
          data-te-datepicker-init
          data-te-format="mmm d, yyyy"
        >
          <input
            type="text"
            aria-labelledby={`${name}-label`}
            className={` block w-full resize-none rounded-5 border px-5 py-3 text-fs-charcoal transition placeholder:text-[#9ca3af]
          ${`border-fs-border-gray focus:border-fs-purple focus:ring-fs-purple`}`}
          />
          <button
            data-te-datepicker-toggle-ref
            data-te-datepicker-toggle-button-ref
            className="justify-content-center dark:hover:text-primary-400 dark:focus:text-primary-400 absolute right-0.5 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center border-none bg-transparent outline-none hover:text-fs-purple focus:text-fs-purple dark:text-neutral-200 [&>svg]:h-5 [&>svg]:w-5"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path
                fillRule="evenodd"
                d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
                clipRule="evenodd"
              ></path>
            </svg>
          </button>
        </div>

        {isModalOpen && (
          <div>
            {/* ... (modal content) */}
            <button onClick={handleOkButtonClick}>OK</button>
            <button onClick={handleCancelButtonClick}>Cancel</button>
          </div>
        )}
        {/* <HelperText hasError={hasError}>{!!helperNode ? helperNode : helperText}</HelperText> */}
      </fieldset>
    </>
  );
};

export default MyDatepicker;

Try to use your code in fresh app and check whether it works there or not. Please follow the instructions we described in our integration tutorial

https://tw-elements.com/docs/standard/integrations/next-integration/

[Bishalsnghd07]

Yeah, this is solved, but new problem arises. The problem is, when I navigate from one page to other page and come back to this page and trying to click on datepicker again it did not triggering and even modal is also not opening. But, when I refresh the page then datepicker working perfectly. What should I do for it?

[Bishalsnghd07]

Any response?

[juujisai]

Use allowReinits for the initTE method. initTE({ Timepicker, Input }, { allowReinits: true });

You can find the description of this option and others that are available here:
https://tw-elements.com/docs/standard/getting-started/quick-start/#formats

If there will be other issues with document not defined , use dynamic imports like that:

  useEffect(() => {
    const init = async () => {
      const { Datepicker, initTE } = await import("tw-elements");
      initTE({ Datepicker }, { allowReinits: true });
    };
    init();
  }, []);

We are answering every discussion and issue when we are able to and when we have time for it. There is no need for asking about response after every your post.

The fastest way of getting an information about an issue / thing you are trying to do, is to check existing discussions and issues. You can fillter those (both open and closed) to check whether someone already discussed that and maybe the solution is already there.

[Bishalsnghd07]

Dates clear off when selecting any other dropdown field..

[Bishalsnghd07]

This is the form page, in this page I submit my selected Subscription Start Date and Subscription End Date data from datepicker component by clicking on submit button, every field data is succesfully reflecting in this form page but only selected Subscription Start Date and selected Subscription end Date data is not reflecting, please check this code if anything needed to be changed and suggest any idea. This is very urgent, please give it precedence

app-subscription-form.tsx component:

`'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect, useState } from 'react';
import { Controller, SubmitHandler, useForm } from 'react-hook-form';

import InputAutocomplete from '@/components/ui/molecules/input-autocomplete';

import Utils from '@/lib/utils';
import { IOption } from '@/models/interfaces';

import InputDatePicker from '@/components/ui/molecules/date-picker/date-picker';
import InputSwitch from '@/components/ui/molecules/input-switch/input-switch';
import InputText from '@/components/ui/molecules/input-text/input-text';
import PAYMENT_OPTIONS from '@/data/options/payement-frequency-options';
import RENEW_OPTIONS from '@/data/options/renew-options';
import SUBSCRIPTION_OPTIONS from '@/data/options/subscription-options';
import AppSubscriptionInputs, { APP_SUBSCRIPTION_ZOD } from './app-subscription-inputs';

interface IAppSubscriptionForm {
submitForm: Function;
appSubscription: AppSubscriptionInputs | null;
}

export default function AppSubscriptionForm({ submitForm, appSubscription }: IAppSubscriptionForm) {
// const dateObj = new Date();

// get the month in this format of 04, the same for months
// const month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
// const day = ('0' + dateObj.getDate()).slice(-2);
// const year = dateObj.getFullYear();

const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(APP_SUBSCRIPTION_ZOD),
mode: 'all',
defaultValues: {
plan: appSubscription?.plan ?? '',
subscriptionStartDate: appSubscription?.subscriptionStartDate ?? '',
subscriptionEndDate: appSubscription?.subscriptionEndDate ?? '',
cost: appSubscription?.cost ?? '',
paymentFrequency: appSubscription?.paymentFrequency ?? '',
subscriptionType: appSubscription?.subscriptionType ?? '',
licenses: appSubscription?.licenses ?? '',
vendorContact: appSubscription?.vendorContact ?? '',
clientName: appSubscription?.clientName ?? '',
clientEmail: appSubscription?.clientEmail ?? '',
},
});

const onSubmit: SubmitHandler = (data) => {
submitForm(data);
};

const [selectedPaymentFrequency, setSelectedPaymentFrequency] = useState<IOption | null>(
Utils.getCategoryOptionByValue(appSubscription?.paymentFrequency ?? '')
);

const [selectedRenews, setSelectedRenews] = useState<IOption | null>(
Utils.getAppStatusOptionByValue(appSubscription?.renews ?? '')
);

const [selectedSubscriptionType, setSelectedSubscriptionType] = useState<IOption | null>(
Utils.getAppStatusOptionByValue(appSubscription?.subscriptionType ?? '')
);

const [isOpen, setIsOpen] = useState(false);

function setValue(arg0: string, val: string) {
throw new Error('Function not implemented.');
}

const init = async () => {
const { Datepicker, initTE } = await import('tw-elements');
initTE({ Datepicker }, { allowReinits: true });
};

useEffect(() => {
init();
}, []);

return (
<>

<Controller
name="plan"
control={control}
render={({ field }) => <InputText {...field} label="Plan" placeholder="Plus" data-autofocus />}
/>

    <div className="grid w-full sm:grid-cols-2 sm:gap-7">
      <Controller
        name="subscriptionStartDate"
        control={control}
        render={({ field }) => (
          <InputDatePicker
            {...field}
            label="Subscription Start Date"
            onChange={(val: string) => setValue('subscriptionStartDate', val)}
            value={field.value || ''}
            data-te-datepicker-toggle-ref
            data-te-datepicker-toggle-button-ref
            data-autofocus
          />
        )}
      />

      <Controller
        name="subscriptionEndDate"
        control={control}
        render={({ field }) => (
          <InputDatePicker
            {...field}
            label="Subscription End Date"
            onChange={(val: string) => setValue('subscriptionEndDate', val)}
            value={field.value || ''}
            data-te-datepicker-toggle-ref
            data-te-datepicker-toggle-button-ref
            data-autofocus
          />
        )}
      />
    </div>
    <div className="grid w-full sm:grid-cols-2 sm:gap-7">
      <Controller
        name="paymentFrequency"
        control={control}
        render={({ field }) => (
          <InputAutocomplete
            {...field}
            options={PAYMENT_OPTIONS}
            value={selectedPaymentFrequency}
            onChange={(val: IOption) => {
              field.onChange(val.value);
              setSelectedPaymentFrequency(val);
            }}
            label="Payment Frequency"
            placeholder="Monthly"
            helperText={errors.paymentFrequency?.message}
            hasError={!!errors.paymentFrequency}
          />
        )}
      />

      <Controller
        name="renews"
        control={control}
        render={({ field }) => (
          <InputAutocomplete
            {...field}
            options={RENEW_OPTIONS}
            value={selectedRenews}
            onChange={(val: IOption) => {
              field.onChange(val.value);
              setSelectedRenews(val);
            }}
            label="Renews"
            placeholder="Automatically"
          />
        )}
      />
    </div>

    <div className="grid w-full sm:grid-cols-3 sm:gap-7">
      <div className="sm:col-span-2">
        <Controller
          name="subscriptionType"
          control={control}
          render={({ field }) => (
            <InputAutocomplete
              {...field}
              options={SUBSCRIPTION_OPTIONS}
              value={selectedSubscriptionType}
              onChange={(val: IOption) => {
                field.onChange(val.value);
                setSelectedSubscriptionType(val);
              }}
              label="Subscription Type"
              placeholder="Recurring"
              helperText={errors.subscriptionType?.message}
              hasError={!!errors.subscriptionType}
              tooltipText="Select Subscription Type"
            />
          )}
        />
      </div>

      <Controller
        name="cost"
        control={control}
        render={({ field }) => (
          <InputText
            {...field}
            label="Cost"
            placeholder=""
            helperText={errors.cost?.message}
            hasError={!!errors.cost}
            data-autofocus
            icon={
              <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M4.272 14.392V13.096C2.352 12.92 1.008 11.8 0.976 10.104H2.528C2.608 10.936 3.136 11.72 4.272 11.896V7.896C2.672 7.48 0.96 7.016 0.96 4.808C0.96 3.08 2.272 1.848 4.272 1.72V0.391999H5.136V1.72C6.96 1.88 8.128 2.952 8.288 4.568H6.736C6.64 3.88 6.112 3.16 5.136 2.952V6.856C6.72 7.256 8.432 7.72 8.432 9.944C8.432 11.432 7.312 12.952 5.136 13.096V14.392H4.272ZM6.976 10.024C6.976 8.888 6.16 8.44 5.136 8.136V11.912C6.32 11.784 6.976 10.984 6.976 10.024ZM2.448 4.728C2.448 5.864 3.248 6.296 4.272 6.616V2.92C3.2 3.016 2.448 3.592 2.448 4.728Z"
                  fill="#3F4C5A"
                />
              </svg>
            }
          />
        )}
      />
    </div>

    <Controller
      name="licenses"
      control={control}
      render={({ field }) => (
        <InputText {...field} label="Licenses" placeholder="" data-autofocus tooltipText="add licenses" />
      )}
    />

    <Controller
      name="vendorContact"
      control={control}
      render={({ field }) => (
        <InputText {...field} label="Vendor Contact" placeholder="John Smith" data-autofocus />
      )}
    />

    <InputSwitch
      name="switch"
      label="Billable"
      open={isOpen}
      onChange={() => {
        setIsOpen(!isOpen);
      }}
      tooltipText="Billable"
    />

    {isOpen && (
      <>
        {' '}
        <Controller
          name="clientName"
          control={control}
          render={({ field }) => (
            <InputText {...field} label="Client Name" placeholder="Adam Kentucky" data-autofocus />
          )}
        />
        <Controller
          name="clientEmail"
          control={control}
          render={({ field }) => (
            <InputText {...field} label="Client Email" placeholder="adam.ken@mybiz.com" data-autofocus />
          )}
        />
      </>
    )}
  </form>
</>

);
}`

[juujisai]

I've sent you the events that the TWE Datepicker is emitting and you are not using them. Please use the proper events for datepicker.

[Bishalsnghd07]

ok

[Bishalsnghd07]

Can you please give any example in which part should I use in this app-subscription-form.tsx component?

[juujisai]

Most likely on this element InputDatePicker.

const myDatepicker= document.getElementById("myDatepicker");          - or use ref for that
myDatepicker.addEventListener("dateChange.te.datepicker", (value) => {
  console.log(value);
});