Init project
This commit is contained in:
alirezakarari
@@ -0,0 +1,61 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: Datepicker.vue
|
||||
Description: Datepicker (third-party) - Imports page portions
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
<template>
|
||||
<div id="extra-component-datetime-picker-demo">
|
||||
|
||||
<p class="mb-4">vue-flatpickr-component is Vue.js component for Flatpickr datetime picker. Read full documnetation <a href="https://github.com/ankurk91/vue-flatpickr-component" target="_blank" rel="nofollow">here</a></p>
|
||||
|
||||
<div class="vx-row match-height">
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-basic class="mb-base"></datetime-picker-basic>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-datetime class="mb-base"></datetime-picker-datetime>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-time class="mb-base"></datetime-picker-time>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-locale class="mb-base"></datetime-picker-locale>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-start-end class="mb-base"></datetime-picker-start-end>
|
||||
</div>
|
||||
<div class="vx-col md:w-1/2 w-full">
|
||||
<datetime-picker-input class="mb-base" ></datetime-picker-input>
|
||||
</div>
|
||||
<div class="vx-col w-full">
|
||||
<datetime-picker-inline></datetime-picker-inline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DatetimePickerBasic from './DatetimePickerBasic.vue'
|
||||
import DatetimePickerDatetime from './DatetimePickerDatetime.vue'
|
||||
import DatetimePickerTime from './DatetimePickerTime.vue'
|
||||
import DatetimePickerLocale from './DatetimePickerLocale.vue'
|
||||
import DatetimePickerStartEnd from './DatetimePickerStartEnd.vue'
|
||||
import DatetimePickerInline from './DatetimePickerInline.vue'
|
||||
import DatetimePickerInput from './DatetimePickerInput.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatetimePickerBasic,
|
||||
DatetimePickerDatetime,
|
||||
DatetimePickerTime,
|
||||
DatetimePickerLocale,
|
||||
DatetimePickerStartEnd,
|
||||
DatetimePickerInline,
|
||||
DatetimePickerInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerBasic.vue
|
||||
Description: basic datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Basic" code-toggler>
|
||||
<p>Rendering basic Datetime Picker with <code>v-model</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr v-model="date" />
|
||||
<p class="mt-4">Selected Date: {{ date }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr v-model="date" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerDatetime.vue
|
||||
Description: datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Datetime Picker" code-toggler>
|
||||
<p>Rendering datetime picker by updating config</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="datetime" placeholder="Date Time" />
|
||||
<p class="mt-4">Selected Datetime: {{ datetime }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="datetime" placeholder="Date Time" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datetime: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
dateFormat: 'd-m-Y H:i'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
datetime: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
dateFormat: 'd-m-Y H:i'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInline.vue
|
||||
Description: inline datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Inline Picker" code-toggler>
|
||||
<p>Creating inline datetime picker by setting <code>inline</code> to <code>true</code></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInput.vue
|
||||
Description: allow input in datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Allow input in Picker" code-toggler>
|
||||
<p>Use <code>allowInput</code> to create Datepicker with input support</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Insert Date" />
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Inline Picker" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
inline: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
allowInput: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerLocale.vue
|
||||
Description: Create datetime picler according to locale
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Change Locale" code-toggler>
|
||||
<p>Import locale and set <code>locale</code> in config of picker to change locale.</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Choose Date" />
|
||||
<p class="mt-4">Selected Date: {{ date }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="date" placeholder="Choose Date" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.min.css';
|
||||
import {French as FrenchLocale} from 'flatpickr/dist/l10n/fr.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
locale: FrenchLocale
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.min.css'
|
||||
import {French as FrenchLocale} from 'flatpickr/dist/l10n/fr.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
date: null,
|
||||
configdateTimePicker: {
|
||||
locale: FrenchLocale
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerInput.vue
|
||||
Description: allow input in datetime picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Start-End Date" code-toggler>
|
||||
<p>Create start and end date - date picker</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<div>
|
||||
<flat-pickr :config="configFromdateTimePicker" v-model="fromDate" placeholder="From Date" @on-change="onFromChange" />
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<flat-pickr :config="configTodateTimePicker" v-model="toDate" placeholder="To Date" @on-change="onToChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configFromdateTimePicker" v-model="fromDate" placeholder="From Date" @on-change="onFromChange" />
|
||||
<flat-pickr :config="configTodateTimePicker" v-model="toDate" placeholder="To Date" @on-change="onToChange" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fromDate: null,
|
||||
toDate: null,
|
||||
configFromdateTimePicker: {
|
||||
minDate: new Date(),
|
||||
maxDate: null
|
||||
},
|
||||
configTodateTimePicker: {
|
||||
minDate: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFromChange(selectedDates, dateStr, instance) {
|
||||
this.$set(this.configTodateTimePicker, 'minDate', dateStr);
|
||||
},
|
||||
onToChange(selectedDates, dateStr, instance) {
|
||||
this.$set(this.configFromdateTimePicker, 'maxDate', dateStr);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
fromDate: null,
|
||||
toDate: null,
|
||||
configFromdateTimePicker: {
|
||||
minDate: new Date(),
|
||||
maxDate: null
|
||||
},
|
||||
configTodateTimePicker: {
|
||||
minDate: null
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onFromChange (selectedDates, dateStr) {
|
||||
this.$set(this.configTodateTimePicker, 'minDate', dateStr)
|
||||
},
|
||||
onToChange (selectedDates, dateStr) {
|
||||
this.$set(this.configFromdateTimePicker, 'maxDate', dateStr)
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!-- =========================================================================================
|
||||
File Name: DatetimePickerTime.vue
|
||||
Description: Only time picker
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
========================================================================================== -->
|
||||
|
||||
|
||||
<template>
|
||||
<vx-card title="Time Picker" code-toggler>
|
||||
<p>set <code>noCalendar</code> to <code>true</code> to hide calendar</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<flat-pickr :config="configdateTimePicker" v-model="time" placeholder="Choose time" />
|
||||
<p class="mt-4">Selected Time: {{ time }}</p>
|
||||
</div>
|
||||
|
||||
<template slot="codeContainer">
|
||||
<template>
|
||||
<flat-pickr :config="configdateTimePicker" v-model="time" placeholder="Choose time" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component';
|
||||
import 'flatpickr/dist/flatpickr.css';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
time: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
enableSeconds: true,
|
||||
noCalendar: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</template>
|
||||
</vx-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
time: null,
|
||||
configdateTimePicker: {
|
||||
enableTime: true,
|
||||
enableSeconds: true,
|
||||
noCalendar: true
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user