P
CUI v1.20.1177
Documentation and examples in using Date Picker & Date Range Picker with PCUI
<link href="~/PCUIAssets/PCUI/Plugins/DateRangePicker/css/daterangepicker.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/DatePickerV2/css/DatePickerV2.min.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Elements/Badge/css/Badge.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Plugins/DateRangePicker/js/moment.min.js">
<script src="~/PCUIAssets/PCUI/Plugins/DateRangePicker/js/daterangepicker.min.js">
<script src="~/PCUIAssets/PCUI/Components/DatePickerV2/js/DatePickerV2.js">
<div class="pcui">
<pcui_date_range_picker ref="date-range"
id="date-range-id"
v-model="rangeDate"
date-format="{{dateFormat.text}}"
start-label="{{startLabel}}"
end-label="{{endLabel}}"
placeholder="{{placeholder}}"
max-date="{{maxDateRange}}"
min-date="{{minDateRange}}"
:date-buttons="{{hasButton}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_range_picker>
</div>
<div class="pcui">
<pcui_date_range_picker ref="date-range"
id="date-range-id"
v-model="rangeDate"
date-format="{{dateFormat.text}}"
start-label="{{startLabel}}"
end-label="{{endLabel}}"
placeholder="{{placeholder}}"
:date-buttons="{{hasButton}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_range_picker>
</div>
<div class="pcui">
<pcui_single_date_picker ref="date-pickers"
id="date-pickers-id"
v-model="singleDate"
date-format="{{dateFormat.text}}"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_single_date_picker>
</div>
<div class="pcui">
<pcui_single_date_picker ref="date-pickers"
id="date-pickers-id"
v-model="singleDate"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
max-date="{{maxDateRange}}"
min-date="{{minDateRange}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_single_date_picker>
</div>
<div class="pcui">
<pcui_date_time_range_picker ref="date-time-range"
id="dateTimeRangeDemo"
v-model="singleDate"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_time_range_picker>
</div>
<div class="pcui">
<pcui_date_time_range_picker ref="date-time-range"
id="dateTimeRangeDemo"
v-model="singleDate"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
max-date="{{maxDateRange}}"
min-date="{{minDateRange}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_time_range_picker>
</div>
<div class="pcui">
<pcui_date_time_single_picker ref="date-time-picker"
id="date-time-picker"
v-model="singleDate"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_time_single_picker>
</div>
<div class="pcui">
<pcui_date_time_single_picker ref="date-time-picker"
id="date-time-picker"
v-model="singleDate"
label="{{dateLabel}}"
placeholder="{{placeholder}}"
max-date="{{maxDateRange}}"
min-date="{{minDateRange}}"
:disabled="{{disabled}}"
:limit="{{hasDateLimit}}"
:apply-buttons-callback="Callback">
</pcui_date_time_single_picker>
</div>