مؤلفه "پایه انتخاب تاریخ" به کاربران اجازه میدهد تا انتخاب کنند تاریخها را از یک تقویم. این یک عنصر ورودی اساسی است در بسیاری از برنامههای وب، به خصوص در فرمهایی که نیاز به ورود یا انتخاب تاریخ دارند.
HTMLOpenTaginput
data-tw-merge
type="text" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
HTMLCloseTag
مؤلفه "انتخابگر تاریخ پایه" با استفاده از Litepicker راهی کاربرپسند برای انتخاب تاریخها در برنامه وب شما فراهم میکند. این ابزار قابلیت پیکربندی بالا و یکپارچهسازی آسان را در پروژههای شما فراهم میکند.
مؤلفه "گروه ورودی" یک فیلد ورودی را با یک آیکون تقویم و یک انتخابگر تاریخ ترکیب میکند تا انتخاب تاریخ در برنامه وب شما را آسانتر کند. این مؤلفه برای بهبود تجربه کاربری هنگام ورود تاریخ در فرمها مفید است.
HTMLOpenTagdiv class="relative mx-auto w-56"HTMLCloseTag
HTMLOpenTagdiv
class="absolute flex h-full w-10 items-center justify-center rtl:rounded-r ltr:rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400"HTMLCloseTag
HTMLOpenTagi
data-tw-merge
data-lucide="calendar"
class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12 datepicker rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
مؤلفه "انتخابگر تاریخ گروه ورودی" روشی شیک و کاربرپسند برای انتخاب تاریخها در برنامه وب شما فراهم میکند. با ترکیب یک فیلد ورودی با یک آیکون تقویم و Litepicker، کاربران میتوانند به راحتی تاریخها را وارد کنند و فرمهای شما را بیشتر در دسترس و قابل فهم کنند.
مؤلفه "انتخابگر دامنه تاریخ" به کاربران اجازه میدهد تا در برنامه وب شما یک دامنه تاریخ را انتخاب کنند. این مؤلفه برای سناریوهایی که نیاز به جمعآوری دامنههای تاریخی مانند سیستمهای رزرو یا فیلترینگ بر اساس تاریخ دارند، مفید است.
HTMLOpenTaginput
data-tw-merge
type="text" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker mx-auto block w-56 mx-auto block w-56 datepicker mx-auto block w-56 mx-auto block w-56"
HTMLCloseTag
مؤلفه "انتخابگر دامنه تاریخ" با فراهم کردن روشی آسان و شفاف برای کاربران برای انتخاب دامنههای تاریخ، برنامه وب شما را بهبود میبخشد. چه بخواهید یک سیستم رزرو بسازید یا فیلترینگ بر اساس تاریخ را پیادهسازی کنید، این مؤلفه فرآیند جمعآوری دامنههای تاریخی را تسهیل میکند و برنامه شما را کاربرپسندتر و کارآمدتر میکند.
مؤلفه "انتخابگر تاریخ مودال" عملکرد یک انتخابگر تاریخ را با یک پنجره مودال ترکیب میکند، که به کاربران امکان انتخاب تاریخ در یک رابط مودال را میدهد. این مؤلفه برای سناریوهایی که میخواهید تجربه انتخاب تاریخ متمرکز و بدون حواشی را فراهم کنید، مفید است.
HTMLOpenTag!-- BEGIN: نمایش مودال Toggle --HTMLCloseTag
HTMLOpenTagdiv class="text-center"HTMLCloseTag
HTMLOpenTaga
data-tw-merge
data-tw-toggle="modal" data-tw-target="#datepicker-modal-preview" href="#" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
HTMLCloseTagنمایش مودالHTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: نمایش مودال Toggle --HTMLCloseTag
HTMLOpenTag!-- BEGIN: مودال Content --HTMLCloseTag
HTMLOpenTagdiv
data-tw-backdrop=""
aria-hidden="true"
tabindex="-1"
id="datepicker-modal-preview" class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&:not(.show)]:duration-[0s,0.2s] [&:not(.show)]:delay-[0.2s,0s] [&:not(.show)]:invisible [&:not(.show)]:opacity-0 [&.show]:visible [&.show]:opacity-100 [&.show]:duration-[0s,0.4s]"
HTMLCloseTagHTMLOpenTagdiv
data-tw-merge
class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]"
HTMLCloseTagHTMLOpenTag!-- BEGIN: مودال سربرگ --HTMLCloseTag
HTMLOpenTagdiv
class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400"
HTMLCloseTagHTMLOpenTagh2 class="rtl:ml-auto ltr:mr-auto text-base font-medium"HTMLCloseTag
فیلتر با تاریخ
HTMLOpenTag/h2HTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 hidden sm:flex hidden sm:flex"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="file"
class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
دانلود اسنادHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTagdiv
data-tw-merge
data-tw-placement="bottom-start"
class="dropdown relative sm:hidden"
HTMLCloseTagHTMLOpenTaga
data-tw-toggle="dropdown"
aria-expanded="false"
href="javascript:;" class="cursor-pointer block h-5 w-5"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="more-horizontal"
class="stroke-[1] w-5 h-5 h-5 w-5 text-slate-500 h-5 w-5 text-slate-500"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
HTMLOpenTag/aHTMLCloseTag
HTMLOpenTagdiv
data-transition
data-selector=".show"
data-enter="transition-all ease-linear duration-150"
data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
data-enter-to="!mt-1 visible opacity-100 translate-y-0"
data-leave="transition-all ease-linear duration-150"
data-leave-from="!mt-1 visible opacity-100 translate-y-0"
data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
class="dropdown-menu absolute z-[9999] hidden"
HTMLCloseTagHTMLOpenTagdiv
data-tw-merge
class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40"
HTMLCloseTag
HTMLOpenTaga
class="cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"
HTMLCloseTagHTMLOpenTagi
data-tw-merge
data-lucide="file"
class="stroke-[1] w-5 h-5 rtl:ml-2 ltr:mr-2 h-4 w-4 rtl:ml-2 ltr:mr-2 h-4 w-4"
HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
دانلود اسنادHTMLOpenTag/aHTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: مودال سربرگ --HTMLCloseTag
HTMLOpenTag!-- BEGIN: مودال Body --HTMLCloseTag
HTMLOpenTagdiv
data-tw-merge
class="p-5 grid grid-cols-12 gap-4 gap-y-3"
HTMLCloseTagHTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="modal-datepicker-1" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
از
HTMLOpenTag/labelHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" id="modal-datepicker-1" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker datepicker"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="col-span-12 sm:col-span-6"HTMLCloseTag
HTMLOpenTaglabel
data-tw-merge
for="modal-datepicker-2" class="inline-block mb-2 group-[.form-inline]:mb-2 group-[.form-inline]:sm:mb-0 ltr:group-[.form-inline]:sm:mr-5 rtl:group-[.form-inline]:sm:ml-5 ltr:group-[.form-inline]:sm:text-right rtl:group-[.form-inline]:sm:text-left"
HTMLCloseTag
تا
HTMLOpenTag/labelHTMLCloseTag
HTMLOpenTaginput
data-tw-merge
type="text" id="modal-datepicker-2" data-single-mode="true" class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10 datepicker datepicker"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: مودال Body --HTMLCloseTag
HTMLOpenTag!-- BEGIN: مودال Footer --HTMLCloseTag
HTMLOpenTagdiv
class="px-5 py-3 rtl:text-left ltr:text-right border-t border-slate-200/60 dark:border-darkmode-400 rtl:text-left ltr:text-right"
HTMLCloseTagHTMLOpenTagbutton
data-tw-merge
data-tw-dismiss="modal" type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 rtl:ml-1 ltr:mr-1 w-20 rtl:ml-1 ltr:mr-1 w-20"
HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTagbutton
data-tw-merge
type="button" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary w-20 w-20"
HTMLCloseTagثبتHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: مودال Footer --HTMLCloseTagHTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
HTMLOpenTag!-- END: مودال Content --HTMLCloseTag
مولفه "مودال انتخاب تقویم" راحتی یک تاریخگزین را با تجربه کاربر پسند یک پنجره مودال ترکیب میکند. این ادغام روشی تمیز و سازمان یافته را برای کاربران فراهم می کند تا تاریخ ها را در برنامه وب شما انتخاب کنند و آن را برای فیلترهای مبتنی بر تاریخ یا هر سناریویی که انتخاب تاریخ مورد نیاز است ایده آل می کند.
در این بخش، شما اطلاعات دقیقی درباره ویژگیها، کلاسها، و گزینههای موجود که میتوان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگیها برای سفارشیسازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.
در زیر لیستی از ویژگیهایی که میتوان به اجزاء منتقل کرد، آمده است:
پراپ | نوع | شرح |
---|---|---|
`options` | `LitepickerConfig` | گزینههای پیکربندی Litepicker. |
`value` | `string` | ارزش ورودی Litepicker. |
`onChange` | `(date: string) => void` | تابع بازخوانی که هنگامی که مقدار ورودی Litepicker تغییر میکند فراخوانی میشود. |
`getRef` | `(el: LitepickerElement) => void` | یک تابع که یک مرجع به عنصر ورودی Litepicker. |