<template>
<appdate-picker
:full-month-name="true"
input-class="customClass"
placeholder="YYYY-MM-DD"
:typeable="true"
:hideInput="false"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const dateSelected = ref(new Date())
/**
* Handler for select-day function
*/
function handleValue(payload: Date): void {
console.log('handleValue', payload);
}
return {
dateSelected,
handleValue
}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
:disabled-dates="{
to: new Date(2020, 10, 5),
from: new Date(2020, 10, 16),
dates: [
new Date(2020, 10, 10),
new Date(2020, 10, 11),
],
}"
:prevent-disable-date-selection="preventDisableDateSelection"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const defaultValue = ref(new Date())
/**
* Handler for select-day function
*/
function dateSelected(payload: Date): void {
console.log('dateSelected', payload);
}
const preventDisableDateSelection = true
return {
dateSelected,
defaultValue
preventDisableDateSelection
}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
@input="dateSelected"
:value="defaultValue"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const defaultValue = ref(new Date())
function dateSelected(payload: Date): void {
console.log('dateSelected', payload)
}
return {
dateSelected,
defaultValue
}
}
}
<script>
<appdate-picker
v-model="dateinput"
@update:modelValue="dateSelected"
/>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const dateinput = ref(new Date())
function dateSelected(payload : Date): void {
console.log(payload);
}
return {dateinput,dateSelected}
}
}
<script>
UpdateValue : Wed Apr 02 2025 06:19:09 GMT+0000 (Coordinated Universal Time)
<appdate-picker
:ref="(el) => {
inputRef = el;
}"
>
</appdate-picker>
<div class="change-btn">
<button type="button" @click="accessDatePicker">
Access DatePicker
</button>
</div>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const inputRef = ref(null);
function accessDatePicker(): void {
(inputRef.value).value
}
return {inputRef,accessDatePicker}
}
}
<script>
Value :
<template>
<appdate-picker
placeholder="Select Day"
:minimum-view="'day'"
:maximum-view="'day'"
@input="handleChangedDay"
>
</appdate-picker>
</template>
<script lang="js">
export default {
setup(){
function handleChangedDay(payload) {
console.log( payload )
}
return {handleChangedDay}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
:highlighted="{
to: new Date(2020, 11, 16),
from: new Date(2020, 10, 17),
}"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
return {
}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Month"
:minimum-view="'month'"
:maximum-view="'month'"
@changedMonth="handleChangedMonth"
>
</appdate-picker>
</template>
<script lang="js">
export default {
setup(){
function handleChangedMonth(payload) {
console.log( payload )
}
return {handleChangedMonth}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Year"
:minimum-view="'year'"
:maximum-view="'year'"
@changedYear="handleChangedYear"
>
</appdate-picker>
</template>
<script lang="js">
export default {
setup(){
function handleChangedYear(payload) {
console.log( payload )
}
return {handleChangedYear}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
:iconColor="color"
:iconHeight="height"
:iconWidth="width"
>
</appdate-picker>
</template>
<script lang="js">
export default {
setup(){
const color = 'red';
const height = '18';
const width = '18';
return {color,width,height}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
@input="dateSelected"
:value="defaultValue"
>
<template v-slot:belowDate>
<p>Below Date Input</p>
</template>
<template v-slot:customCalendarHeader>
<p>Before Calendar Header Slot</p>
</template>
<template v-slot:formatDateTopBar>
<p>{{formattedDate}}</p>
</template>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const defaultValue = ref(new Date())
function dateSelected(payload: Date): void {
console.log('dateSelected', payload)
}
/**
* Handler for select-day function
*/
function dateSelected(payload: Date): void {
defaultValue.value = payload
}
const formattedDate = computed(() => {
return defaultValue.value.toString();
})
return {
...
defaultValue,
dateSelected,
changeDefaultValue,
formattedDate
}
}
}
<script>
Below Date Input
<template>
<appdate-picker
placeholder="Select Date"
@input="dateSelected"
value="2020-12-16"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const defaultValue = ref(new Date())
function dateSelected(payload: Date): void {
console.log('dateSelected', payload)
}
return {
dateSelected,
defaultValue
}
}
}
<script>
<template>
<appdate-picker
inline="true"
>
</appdate-picker>
</template>
<script lang="js">
export default {
setup(){
return {}
}
}
<script>
<template>
<appdate-picker
placeholder="Select Date"
@input="dateSelected"
:value="defaultValue"
language="hi"
>
</appdate-picker>
</template>
<script lang="js">
import { ref } from 'vue';
export default {
setup(){
const defaultValue = ref(new Date())
function dateSelected(payload: Date): void {
console.log('dateSelected', payload)
}
return {
dateSelected,
defaultValue
}
}
}
<script>