P
CUI v1.20.1177
Documentation and examples in using Date picker with PCUI
<link href="~/PCUIAssets/PCUI/Plugins/DateRangePicker/css/daterangepicker.css" rel="stylesheet" />
<link href="~/PCUIAssets/PCUI/Components/DatePicker/css/DatePicker.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Plugins/DateRangePicker/js/moment.min.js"></script>
<script src="~/PCUIAssets/PCUI/Plugins/DateRangePicker/js/daterangepicker.min.js"><script>
<script src="~/PCUIAssets/PCUI/Components/DatePicker/js/DatePicker.js"></script>
<pcui_date_picker v-bind="dateRangePicker1">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
dateRangePicker1: {
id: 'date-range-picker-yyyy-mm-dd',
dateButtons: false,
dateType: 'range-date-picker',
startLabel: 'Start Date',
endLabel: 'End Date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'yyyy/mm/dd',
disabled: false,
ref: 'demo1',
applyButtonsCallback: this.dateRangePickerTest
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
dateRangePickerTest: function () {
console.log(this.$refs['demo1'].dateRangeStartDate);
console.log(this.$refs['demo1'].dateRangeEndDate);
}
}
});
<pcui_date_picker v-bind="dateRangePicker2">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
dateRangePicker2: {
id: 'date-range-picker-mm-dd-yyyy',
dateButtons: false,
dateType: 'range-date-picker',
startLabel: 'Start Date',
endLabel: 'End Date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'mm/dd/yyyy',
disabled: false,
ref: 'demo2',
applyButtonsCallback: this.dateRangePickerTest1
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
dateRangePickerTest1: function () {
console.log(this.$refs['demo2'].dateRangeStartDate);
console.log(this.$refs['demo2'].dateRangeEndDate);
}
}
});
<pcui_date_picker v-bind="dateRangePicker3">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
dateRangePicker3: {
id: 'date-range-picker-dd-mm-yyyy',
dateButtons: false,
dateType: 'range-date-picker',
startLabel: 'Start Date',
endLabel: 'End Date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'dd/mm/yyyy',
disabled: false,
ref: 'demo3',
applyButtonsCallback: this.dateRangePickerTest2
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
dateRangePickerTest2: function () {
console.log(this.$refs['demo3'].dateRangeStartDate);
console.log(this.$refs['demo3'].dateRangeEndDate);
}
}
});
<pcui_date_picker v-bind="dateRangePicker4">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
plain: '',
dateRangePicker4: {
id: 'with-button-date-range-picker-dd-mm-yyyy',
dateButtons: true,
dateType: 'range-date-picker',
startLabel: 'Start Date',
endLabel: 'End Date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'dd/mm/yyyy',
disabled: false,
ref: 'demo4',
applyButtonsCallback: this.dateRangePickerWithButtonTest
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
dateRangePickerWithButtonTest: function () {
console.log(this.$refs['demo4'].dateRangeStartDate);
console.log(this.$refs['demo4'].dateRangeEndDate);
}
}
});
<pcui_date_picker v-bind="dateRangePicker5">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
plain: '',
dateRangePicker5: {
id: 'with-button-date-range-picker-mm-dd-yyyy',
dateButtons: true,
dateType: 'range-date-picker',
startLabel: 'Start Date',
endLabel: 'End Date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'yyyy/mm/dd',
disabled: false,
ref: 'demo5',
applyButtonsCallback: this.dateRangePickerWithButtonTest1
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
dateRangePickerWithButtonTest2: function () {
console.log(this.$refs['demo6'].dateRangeStartDate);
console.log(this.$refs['demo6'].dateRangeEndDate);
}
}
});
<pcui_date_picker v-bind="singleDatePickerTest">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
plain: '',
singleDatePickerTest: {
id: 'no-btn-date-single-picker-yyyy-mm-dd',
dateType: 'single-date-picker',
dateLabel:'Pick a date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'mm/dd/yyyy',
disabled: false,
minDate: '12/20/2019',
ref: 'demo7',
applyButtonsCallback: this.singleDatePickerTest
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
singleDatePickerTest: function () {
console.log(this.$refs['demo7'].datePickerDate);
}
}
});
<pcui_date_picker v-bind="singleDatePickerTest1">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
singleDatePickerTest1: {
id: 'no-btn-date-single-picker-mm-dd-yyyy',
dateType: 'single-date-picker',
dateLabel: 'Pick a date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'mm/dd/yyyy',
disabled: false,
max-date="01/20/2020"
ref: 'demo8',
applyButtonsCallback: this.singleDatePickerTest1
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
singleDatePickerTest1: function () {
console.log(this.$refs['demo8'].datePickerDate);
}
}
});
<pcui_date_picker v-bind="singleDatePickerTest2">
</pcui_date_picker>
var datePickerDemoDom = new Vue({
el: '#date-picker-demo',
name: 'Date Picker Demo',
data: function () {
return {
plain: '',
singleDatePickerTest2: {
id: 'no-btn-date-single-picker-dd-mm-yyyy',
dateType: 'single-date-picker',
dateLabel: 'Pick a date',
placeholder: 'Select a Date',
dateAlignment: 'right',
dateFormat: 'dd/mm/yyyy',
disabled: false,
ref: 'demo9',
applyButtonsCallback: this.singleDatePickerTest2
}
};
},
components: {
pcui_date_picker: PCUIDatePicker,
},
methods: {
singleDatePickerTest2: function () {
console.log(this.$refs['demo9'].datePickerDate);
}
}
});