انتخاب تاریخ
پایه انتخاب تاریخ

مؤلفه "پایه انتخاب تاریخ" به کاربران اجازه می‌دهد تا انتخاب کنند تاریخ‌ها را از یک تقویم. این یک عنصر ورودی اساسی است در بسیاری از برنامه‌های وب، به خصوص در فرم‌هایی که نیاز به ورود یا انتخاب تاریخ دارند.

کد / پیش‌نمایش نمونه
            
                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
            
        

مولفه "مودال انتخاب تقویم" راحتی یک تاریخ‌گزین را با تجربه کاربر پسند یک پنجره مودال ترکیب می‌کند. این ادغام روشی تمیز و سازمان یافته را برای کاربران فراهم می کند تا تاریخ ها را در برنامه وب شما انتخاب کنند و آن را برای فیلترهای مبتنی بر تاریخ یا هر سناریویی که انتخاب تاریخ مورد نیاز است ایده آل می کند.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Litepicker
پراپ نوع شرح
`options` `LitepickerConfig` گزینه‌های پیکربندی Litepicker.
`value` `string` ارزش ورودی Litepicker.
`onChange` `(date: string) => void` تابع بازخوانی که هنگامی که مقدار ورودی Litepicker تغییر می‌کند فراخوانی می‌شود.
`getRef` `(el: LitepickerElement) => void` یک تابع که یک مرجع به عنصر ورودی Litepicker.