پیام محمدی مدیر سامانه
فیلد گاهشمار
Input date is a set of bootstrap components (mainly input-group and modal) to build a control that allows users to navigate in the calendar and select a date. See the example below:
Source code
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="form-group">
<label>From</label>
<div class="input-group">
<div class="form-control"></div>
<div class="input-group-append">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-6">
<div class="form-group">
<label>Until</label>
<div class="input-group">
<div class="form-control"></div>
<div class="input-group-append">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="calendar" class="modal modal-calendar fade" tabindex="-1" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="input-group mx-auto">
<div class="input-group-prepend">
<button type="button" class="btn btn-link" data-calendar-month="previous">
<i class="fa fa-angle-left"></i>
</button>
</div>
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" data-calendar-month="0">January</a>
<a href="#" class="dropdown-item" data-calendar-month="1">February</a>
<a href="#" class="dropdown-item" data-calendar-month="2">March</a>
<a href="#" class="dropdown-item" data-calendar-month="3">April</a>
<a href="#" class="dropdown-item" data-calendar-month="4">May</a>
<a href="#" class="dropdown-item" data-calendar-month="5">June</a>
<a href="#" class="dropdown-item" data-calendar-month="6">July</a>
<a href="#" class="dropdown-item" data-calendar-month="7">August</a>
<a href="#" class="dropdown-item" data-calendar-month="8">September</a>
<a href="#" class="dropdown-item" data-calendar-month="9">October</a>
<a href="#" class="dropdown-item" data-calendar-month="10">November</a>
<a href="#" class="dropdown-item" data-calendar-month="11">December</a>
</div>
</div>
<input type="text" class="form-control" maxlength="4">
<div class="input-group-append">
<button type="button" class="btn btn-link" data-calendar-month="next">
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
</div>
<div class="modal-body">
<table class="table-calendar">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
</table>
<div class="text-center">
<button type="button" class="btn btn-link" data-calendar-link="today">
<i class="fa fa-calendar-o"></i> today
</button>
<button type="button" class="btn btn-link" data-calendar-link="selected">
<i class="fa fa-calendar-check-o"></i> selected
</button>
</div>
</div>
<div class="modal-footer">
<button id="btnApply" type="button" class="btn btn-primary" data-dismiss="modal">
Apply
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
var $calendar = $('#calendar');
var $btnApply = $('#btnApply')
$calendar.on('show.bs.modal', function (e) {
var $formControl = $(e.relatedTarget)
.closest('.form-group')
.find('.form-control');
$btnApply.prop('target', $formControl);
$calendar.calendar('date', $formControl.prop('date') || new Date());
});
$btnApply.on('click', function () {
var $target = $btnApply.prop('target');
var date = $calendar.calendar('date');
var formattedDate = moment(date).format('dddd, MMMM D, YYYY');
$target.prop('date', date).text(formattedDate);
});
It is possible have only one calendar for the entire application if you want to.
گاهشمار (تقویم)
The calendar is displayed in a
bootstrap modal
and defined by the class
.modal-calendar.
The navigation of the calendar is placed in the modal header. The modal body contains the current
page (.table-calendar) and the calendar links (today and selected date). The buttons
for confirm and cancel are placed in the modal footer. See the basic structure below:
Source code
<div class="modal modal-calendar fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Calendar navigation -->
</div>
<div class="modal-body">
<!-- Calendar current page (table) -->
<!-- Calendar links (today and selected date) -->
</div>
<div class="modal-footer">
<!-- Buttons for confirm and cancel -->
</div>
</div>
</div>
</div>
سربرگ گاهشمار
The calendar header contains the navigation that allows the user to go to the next pages or to the previous pages of the calendar. Also, the user can select a month in the dropdown or type the desired year. See the example below:
Source code
<div class="input-group mx-auto">
<div class="input-group-prepend">
<button type="button" class="btn btn-link" data-calendar-month="previous">
<i class="fa fa-angle-left"></i>
</button>
</div>
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item" data-calendar-month="0">January</a>
<a href="#" class="dropdown-item" data-calendar-month="1">February</a>
<a href="#" class="dropdown-item" data-calendar-month="2">March</a>
<a href="#" class="dropdown-item" data-calendar-month="3">April</a>
<a href="#" class="dropdown-item" data-calendar-month="4">May</a>
<a href="#" class="dropdown-item" data-calendar-month="5">June</a>
<a href="#" class="dropdown-item" data-calendar-month="6">July</a>
<a href="#" class="dropdown-item" data-calendar-month="7">August</a>
<a href="#" class="dropdown-item" data-calendar-month="8">September</a>
<a href="#" class="dropdown-item" data-calendar-month="9">October</a>
<a href="#" class="dropdown-item" data-calendar-month="10">November</a>
<a href="#" class="dropdown-item" data-calendar-month="11">December</a>
</div>
</div>
<input type="text" class="form-control" maxlength="4">
<div class="input-group-append">
<button type="button" class="btn btn-link" data-calendar-month="next">
<i class="fa fa-angle-right"></i>
</button>
</div>
</div>
بدنهی گاهشمار
The calendar body contains the current page and allows the user to select the desired date. In addition, the body contains the links to today's date and to the selected date.
Source code
<table class="table-calendar">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
</table>
<div class="text-center">
<button type="button" class="btn btn-link" data-calendar-link="today">
<i class="fa fa-calendar-o"></i> today
</button>
<button type="button" class="btn btn-link" data-calendar-link="selected">
<i class="fa fa-calendar-check-o"></i> selected
</button>
</div>
پابرگ گاهشمار
The calendar footer contains the buttons to confirm or cancel the selected date. See the example below:
گزینهها
گزینهها با بهرهجستن از خصیصهی data قابل گزینش هستند.
| گزینه | نوع | توضیحات |
|---|---|---|
data-calendar-link |
string | Navigates directly to the calendar page: today or selected
(selected date).
|
data-calendar-month |
string|number | The month for which it will be navigated: 0..11 (January to December),
previous or next.
|
By design these attribute options only work for children of a
.modal-calendar.
متدها
متدهای کمی برای کنترل گاهشمار موجود هستند:
| متد | توضیحات |
|---|---|
calendar('date') |
Gets the selected date. |
calendar('date', myDate) |
Sets the selected date (automatically queries the selected date). Triggers the events
calendar:change and calendar:query.
|
calendar('query:date') |
Gets the queried date (does not reflect the selected date). |
calendar('query:date', myDate) |
Sets the queried date (recalculates the calendar page). Triggers the event calendar:query.
|
calendar('query:nextMonth') |
Go to next month. Triggers the event calendar:query. |
calendar('query:nextYear') |
Go to next year. Triggers the event calendar:query. |
calendar('query:previousMonth') |
Go to previous month. Triggers the event calendar:query. |
calendar('query:previousYear') |
Go to previous year. Triggers the event calendar:query. |
Events
Events triggered from the calendar can be listened to write custom logic:
| رخداد | توضیحات |
|---|---|
calendar:change |
Triggered after select a date. |
calendar:each |
Triggered for each date while loading the calendar page. |
calendar:query |
Triggered after querying the date. |
Source code
$modalCalendar.on('calendar:change', function (e, date) {
console.log('Selected date: ' + date);
});
$modalCalendar.on('calendar:each', function (e, date) {
console.log('Anchor tag: ' + e.relatedTarget); // Only for dates in the queried month and year
console.log('Current date: ' + date);
});
$modalCalendar.on('calendar:query', function (e, date) {
console.log('Queried date' + date);
});