## بــرچــسب ها - Tags Input

دیت پـیکـر ساده

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-1" class="form-label">دیت پـیکـر ساده</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-1" name="DatePicker-1" data-jdp data-jdp-only-date>
    </div>

دیت پـیکـر + PlaceHolder

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-2" class="form-label">دیت پـیکـر + PlaceHolder</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-2" name="DatePicker-2" data-jdp data-jdp-only-date placeholder="تاریخ تولد خود را وارد کنید">
    </div>

دیت پـیکـر + Value

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-3" class="form-label">دیت پـیکـر + Value</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-3" name="DatePicker-3" data-jdp data-jdp-only-date value="1364/08/21">
    </div>

نمایش تاریخ از امروز- تاریخ های قبل از امروز قابل انتخاب نیست

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-4" class="form-label">نمایش تاریخ از امروز- تاریخ های قبل از امروز قابل انتخاب نیست</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-4" name="DatePicker-4" data-jdp data-jdp-only-date data-jdp-min-date="today" placeholder="نمایش تاریخ از امروز" />
    </div>

نمایش تاریخ تا امروز - تاریخ های بعد از امروز قابل انتخاب نیست

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-5" class="form-label">نمایش تاریخ تا امروز - تاریخ های بعد از امروز قابل انتخاب نیست</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-5" name="DatePicker-5" data-jdp data-jdp-only-date data-jdp-max-date="today" placeholder="نمایش تاریخ تا امروز" />
    </div>

نمایش تاریخ در یک بازه زمانی خاص

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-6" class="form-label">نمایش تاریخ در یک بازه زمانی خاص </label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-6" name="DatePicker-6" data-jdp data-jdp-only-date data-jdp-min-date="1401/08/01" data-jdp-max-date="1401/08/21" placeholder="نمایش تاریخ در بازه خاص" />
    </div>

زمان و تاریخ باهم

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-7" class="form-label">زمان و تاریخ باهم</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-7" name="DatePicker-7" data-jdp placeholder="زمان و تاریخ باهم" />
    </div>

فقط زمان

    <div class="col-12 col-md-6 mb-3">
        <label for="DatePicker-8" class="form-label">فقط زمان</label>
        <input type="text" class="form-control MyDatePicker" id="DatePicker-8" name="DatePicker-8" data-jdp data-jdp-only-time placeholder="فقط زمان" />
    </div>

## آموزش فراخوانی

ابتدا یکی از کدهای دیت پـیکـر که در بالا آمده است را در فرم خود وارد کنید.

کدهای Css زیر را در @section Style خود وارد کنید.

    <!--JalaliDatePicker-->
        <link href="assets/lib/JalaliDatePicker-main/dist/jalalidatepicker.min.css" rel="stylesheet" />
    <!--end JalaliDatePicker-->

کدهای جاوا اسکریپتی زیر را در @section scripts خود وارد کنید.

    <!--JalaliDatePicker-->
        <script src="assets/lib/JalaliDatePicker-main/dist/jalalidatepicker.min.js"></script>
        <script>
             jalaliDatepicker.startWatch({
                 minDate: "attr",
                 maxDate: "attr",
                 minTime: "attr",
                 maxTime: "attr",
                 time: true,
             });
        </script>
    <!--end JalaliDatePicker-->

این پلاگین Jquery قابلیت های زیادی دارد. برای مشاهده همه قابلیت ها از لینک زیر استفاده کنید.

    https://github.com/majidh1/JalaliDatePicker