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

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

کد / پیش‌نمایش نمونه
            
                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 یک راه دوستانه برای انتخاب تاریخ‌ها برای شما در برنامه‌های وب ارائه می‌دهد. این کامپوننت قابلیت پیکربندی بسیار بالا دارد و بسیار آسان برای ادغام در پروژه‌های شماست.

گروه ورودی

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

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

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

رابط اجزاء

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

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

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