TTS. DocsPanel Design System
1.4.0
Forms

Date Picker

Contents

The Date Picker component allows users to select a specific date or a range of dates through an interactive calendar interface. This enhances date input accuracy and usability across forms and scheduling features.

If you are using it with vue, you should import VueDatePicker by npm install @vuepic/vue-datepicker

Range Selection

Allows picking a start and end date, useful for reports and filtering.

View Mode 
                          
 HTML
                            
                          
<div class="dropdown">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="tticon-filter-light btn-icon"></span>
        <span>فلترة</span>
    </button>
    <ul class="dropdown-menu dropdown-start">
        <li class="dropdown-header">
            <span class="dropdown-title">اختر إجراء الفلترة</span>
        </li>
        <li>
            <button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">
                الخدمة
                <span class="dropdown-end-area">
                    <span class="dropdown-number">2</span>
                    <span class="dropdown-chevron tticon-chevron-left"></span>
                </span>
            </button>
            <ul class="dropdown-menu submenu" style="min-width: 230px;">
                <li class="dropdown-header">
                    <button class="submenu-close dropdown-toggle">
                        <span class="tticon-chevron-right"></span>
                        رجوع للفلترة
                    </button>
                </li>
                <li class="dropdown-search">
                    <span class="input-group">
                        <span class="tticon-search input-group-text"></span>
                        <input class="form-control" type="text" placeholder="بحث في الفلتر..">
                    </span>
                </li>
                <li class="dropdown-checks">
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="">
                            خدمة توفير نقاط البيع
                        </label>
                    </span>
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="" checked>
                            خدمة صرف العلاج الدوائي
                        </label>
                    </span>
                </li>
                <li class="dropdown-footer">
                    <button class="btn btn-primary btn-sm">اعتماد</button>
                    <button class="btn btn-secondary btn-sm">إعادة تعيين</button>
                </li>
            </ul>
        </li>
        <li>
            <button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">
                الحالة
                <span class="dropdown-end-area">
                    <span class="dropdown-number">1</span>
                    <span class="dropdown-chevron tticon-chevron-left"></span>
                </span>
            </button>
            <ul class="dropdown-menu submenu" style="min-width: 230px;">
                <li class="dropdown-header">
                    <button class="submenu-close dropdown-toggle">
                        <span class="tticon-chevron-right"></span>
                        رجوع للفلترة
                    </button>
                </li>
                <li class="dropdown-search">
                    <span class="input-group">
                        <span class="tticon-search input-group-text"></span>
                        <input class="form-control" type="text" placeholder="بحث في الفلتر..">
                    </span>
                </li>
                <li class="dropdown-checks">
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="">
                            قيد المراجعة
                        </label>
                    </span>
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="" checked>
                            قيد التنفيذ
                        </label>
                    </span>
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="">
                            مكتملة
                        </label>
                    </span>
                    <span class="form-check dropdown-check-item">
                        <label class="form-label">
                            <input class="form-check-input" type="checkbox" value="">
                            تجربة سريعة
                        </label>
                    </span>
                </li>
                <li class="dropdown-footer">
                    <button class="btn btn-primary btn-sm">اعتماد</button>
                    <button class="btn btn-secondary btn-sm">إعادة تعيين</button>
                </li>
            </ul>
        </li>
        <li>
            <button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown">
                النطاق الزمني
                <span class="dropdown-end-area">
                    <span class="dropdown-number d-none">0</span>
                    <span class="dropdown-chevron tticon-chevron-left"></span>
                </span>
            </button>
            <ul class="dropdown-menu submenu" style="min-width: 230px;">
                <li class="dropdown-header">
                    <button class="submenu-close dropdown-toggle">
                        <span class="tticon-chevron-right"></span>
                        رجوع للفلترة
                    </button>
                </li>
                <li class="js-stop-propagation">
                    <input class="js-datepicker" type="hidden">
                </li>
                <li class="dropdown-footer">
                    <button class="btn btn-primary btn-sm">اعتماد</button>
                    <button class="btn btn-secondary btn-sm">إعادة تعيين</button>
                </li>
            </ul>
        </li>
    </ul>
</div>
<VueDatePicker
  v-model="date"
  :inline="true"
  :enable-time-picker="false"
  locale="ar"
  :auto-apply="true"
  :range="true"
  :dark="true"
/>
<script setup>
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
const date = ref()
// For demo purposes assign range from the current date
onMounted(() => {
const startDate = new Date()
const endDate = new Date(new Date().setDate(startDate.getDate() + 7))
date.value = [startDate, endDate]
})
</script>
<style>
.dp__theme_light {
--dp-primary-color: var(--tt-primary-100) !important;
}

.dp__theme_dark {
--dp-primary-color: var(--tt-primary-100) !important;
}
</style>

Single Date Selection

The Single Date Selection component allows users to pick a specific date along with a time selection, making it ideal for scheduling events, appointments, or reminders.

View Mode 
                          
 HTML
                            
                          
<div class="dropdown btn-group">
    <button class="btn btn-primary">إرسال الرسالة</button>
    <button class="btn btn-primary flex-shrink-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="tticon-calendar-clock btn-icon"></span>
    </button>
    <ul class="dropdown-menu dropdown-end">
        <li class="dropdown-header">
            <span class="dropdown-title">جدولة الرسالة</span>
        </li>
        <li>
            <button class="dropdown-item">
                <span>اليوم، </span>
                <span class="text-english">19</span>
                <span>مارس</span>
                <span class="text-english">9:00 AM</span>
            </button>
        </li>
        <li>
            <button class="dropdown-item">
                <span>غداً،  </span>
                <span class="text-english">20</span>
                <span>مارس</span>
                <span class="text-english">2:00 PM</span>
            </button>
        </li>
        <li>
            <button class="dropdown-item">
                <span>الإثنين،   </span>
                <span class="text-english">21</span>
                <span>مارس</span>
                <span class="text-english">98:00 AM</span>
            </button>
        </li>
        <li class="dropdown-divider"></li>
        <li>
            <button class="dropdown-item dropdown-toggle submenu-open" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                <span class="tticon-calendar-quote dropdown-icon"></span>
                اختر التوقيت
                <span class="dropdown-end-area">
                    <span class="dropdown-chevron tticon-chevron-left"></span>
                </span>
            </button>
            <ul class="dropdown-menu submenu" style="min-width: 230px;">
                <li class="dropdown-header d-none">
                    <button class="submenu-close dropdown-toggle">
                        <span class="tticon-chevron-right"></span>
                        رجوع للفلترة
                    </button>
                </li>
                <li class="js-stop-propagation">
                    <input class="js-datepicker-time" type="hidden">
                </li>
                <li class="dropdown-footer">
                    <button class="btn btn-primary btn-sm">جدولة الرسالة</button>
                    <button class="btn btn-secondary btn-sm">الغياء/تراجع</button>
                </li>
            </ul>
        </li>
    </ul>
</div>
<VueDatePicker
  v-model="date"
  :inline="true"
  :enable-time-picker="false"
  locale="ar"
  :auto-apply="true"
  :dark="true"
/>
<script setup>
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
const date = ref(new Date());
</script>
<style>
.dp__theme_light {
--dp-primary-color: var(--tt-primary-100) !important;
}

.dp__theme_dark {
--dp-primary-color: var(--tt-primary-100) !important;
}
</style>
Last updated 3 months ago