moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerBasic.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Default"
placeholder="Select date"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerDateAndTime.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Date & TIme"
placeholder="Select date and time"
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
/>
</template>

15
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerDisabledRange.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup>
const now = new Date()
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
const currentYear = now.getFullYear()
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Disabled Range"
placeholder="Select date"
:config="{ dateFormat: 'Y-m-d', disable: [{ from: `${currentYear}-${currentMonth}-20`, to: `${currentYear}-${currentMonth}-25` }] }"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerHumanFriendly.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Human Friendly"
placeholder="Select date"
:config="{ dateFormat: 'F j, Y' }"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerInline.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Inline"
placeholder="Select Date"
:config="{ inline: true }"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerMultipleDates.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const multipleDate = ref('')
</script>
<template>
<AppDateTimePicker
v-model="multipleDate"
label="Multiple Dates"
placeholder="Select date"
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerRange.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const dateRange = ref('')
</script>
<template>
<AppDateTimePicker
v-model="dateRange"
label="Range"
placeholder="Select date"
:config="{ mode: 'range' }"
/>
</template>

12
resources/js/views/demos/forms/form-elements/date-time-picker/DemoDateTimePickerTimePicker.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
const time = ref('')
</script>
<template>
<AppDateTimePicker
v-model="time"
label="Time picker"
placeholder="Select time"
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
/>
</template>

212
resources/js/views/demos/forms/form-elements/date-time-picker/demoCodeDateTimePicker.js Normal file
View File

@@ -0,0 +1,212 @@
export const basic = { ts: `<script setup lang="ts">
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Default"
placeholder="Select date"
/>
</template>
`, js: `<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Default"
placeholder="Select date"
/>
</template>
` }
export const dateAndTime = { ts: `<script setup lang="ts">
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Date & TIme"
placeholder="Select date and time"
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
/>
</template>
`, js: `<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Date & TIme"
placeholder="Select date and time"
:config="{ enableTime: true, dateFormat: 'Y-m-d H:i' }"
/>
</template>
` }
export const disabledRange = { ts: `<script setup lang="ts">
const now = new Date()
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
const currentYear = now.getFullYear()
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Disabled Range"
placeholder="Select date"
:config="{ dateFormat: 'Y-m-d', disable: [{ from: \`\${currentYear}-\${currentMonth}-20\`, to: \`\${currentYear}-\${currentMonth}-25\` }] }"
/>
</template>
`, js: `<script setup>
const now = new Date()
const currentMonth = now.toLocaleString('default', { month: '2-digit' })
const currentYear = now.getFullYear()
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Disabled Range"
placeholder="Select date"
:config="{ dateFormat: 'Y-m-d', disable: [{ from: \`\${currentYear}-\${currentMonth}-20\`, to: \`\${currentYear}-\${currentMonth}-25\` }] }"
/>
</template>
` }
export const humanFriendly = { ts: `<script setup lang="ts">
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Human Friendly"
placeholder="Select date"
:config="{ dateFormat: 'F j, Y' }"
/>
</template>
`, js: `<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Human Friendly"
placeholder="Select date"
:config="{ dateFormat: 'F j, Y' }"
/>
</template>
` }
export const inline = { ts: `<script setup lang="ts">
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Inline"
placeholder="Select Date"
:config="{ inline: true }"
/>
</template>
`, js: `<script setup>
const date = ref('')
</script>
<template>
<AppDateTimePicker
v-model="date"
label="Inline"
placeholder="Select Date"
:config="{ inline: true }"
/>
</template>
` }
export const multipleDates = { ts: `<script setup lang="ts">
const multipleDate = ref('')
</script>
<template>
<AppDateTimePicker
v-model="multipleDate"
label="Multiple Dates"
placeholder="Select date"
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
/>
</template>
`, js: `<script setup>
const multipleDate = ref('')
</script>
<template>
<AppDateTimePicker
v-model="multipleDate"
label="Multiple Dates"
placeholder="Select date"
:config="{ mode: 'multiple', dateFormat: 'Y-m-d' }"
/>
</template>
` }
export const range = { ts: `<script setup lang="ts">
const dateRange = ref('')
</script>
<template>
<AppDateTimePicker
v-model="dateRange"
label="Range"
placeholder="Select date"
:config="{ mode: 'range' }"
/>
</template>
`, js: `<script setup>
const dateRange = ref('')
</script>
<template>
<AppDateTimePicker
v-model="dateRange"
label="Range"
placeholder="Select date"
:config="{ mode: 'range' }"
/>
</template>
` }
export const timePicker = { ts: `<script setup lang="ts">
const time = ref('')
</script>
<template>
<AppDateTimePicker
v-model="time"
label="Time picker"
placeholder="Select time"
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
/>
</template>
`, js: `<script setup>
const time = ref('')
</script>
<template>
<AppDateTimePicker
v-model="time"
label="Time picker"
placeholder="Select time"
:config="{ enableTime: true, noCalendar: true, dateFormat: 'H:i' }"
/>
</template>
` }