Skip to content

Instantly share code, notes, and snippets.

@cn-2k

cn-2k/date-picker.vue

Created March 18, 2022 12:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cn-2k/883d3812aee0c9cda3320df6f30512aa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cn-2k/883d3812aee0c9cda3320df6f30512aa to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. cn-2k created this gist Mar 18, 2022.
    153 changes: 153 additions & 0 deletions date-picker.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,153 @@
    <template>
    <DatePicker
    v-model="range"
    :model-config="modelConfig"
    :startDate="startDate"
    :endDate="endDate"
    is-range
    is-required
    color="green"
    >
    <template v-slot:footer>
    <div class="bg-gray-100 text-center p-2 border-t rounded-b-lg">
    <el-button
    plain
    native-type="submit"
    size="small"
    icon="el-icon-search"
    @click="onClick"
    >Buscar</el-button>
    </div>
    </template>

    <template v-slot="{ inputValue, inputEvents, isDragging }">
    <div class="flex flex-row items-center h-10">
    <!-- first input -->
    <div class="relative flex-grow text-sm">
    <svg
    class="text-gray-600 w-4 h-full mx-2 absolute pointer-events-none"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke="currentColor"
    >
    <path
    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
    />
    </svg>
    <input
    class="flex-grow pl-8 pr-2 py-1 bg-transparent border rounded w-full text-gray-600 focus:outline-none"
    :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
    :value="inputValue.start"
    v-on="inputEvents.start"
    />
    </div>

    <span class="flex-shrink-0 mx-2">
    <svg class="w-4 h-4 stroke-current text-gray-600" viewBox="0 0 24 24">
    <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M14 5l7 7m0 0l-7 7m7-7H3"
    />
    </svg>
    </span>

    <!-- second input -->
    <div class="relative flex-grow text-sm">
    <svg
    class="text-gray-600 w-4 h-full mx-2 absolute pointer-events-none"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke="currentColor"
    >
    <path
    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
    />
    </svg>
    <input
    class="flex-grow pl-8 pr-2 py-1 bg-transparent border rounded w-full text-gray-800 focus:outline-none"
    :value="inputValue.end"
    v-on="inputEvents.end"
    />
    </div>
    <div class="ml-2 my-auto">
    <el-button
    plain
    native-type="submit"
    size="mini"
    icon="el-icon-search"
    @click="onClick"
    ></el-button>
    </div>
    <div class="ml-1 my-auto">
    <slot />
    </div>
    </div>
    </template>
    </DatePicker>
    </template>

    <script>
    import { DatePicker } from 'v-calendar'
    import { watch, ref } from 'vue'
    export default {
    components: {
    DatePicker,
    },
    props: {
    startDate: {
    type: [String, Number, Array, Object],
    default: null,
    },
    endDate: {
    type: [String, Number, Array, Object],
    default: null,
    },
    },
    emits: ['update:modelValue', 'click', 'setRange'],
    setup(props, { emit }) {
    const modelConfig = ref({
    type: 'string',
    mask: 'YYYY-MM-DD', // Uses 'iso' if missing
    })
    const range = ref({
    start: props.startDate,
    end: props.endDate,
    })
    watch(
    () => range.value,
    () => {
    emit('setRange', range.value)
    emit('update:modelValue', range.value)
    },
    )
    const onClick = (value) => {
    emit('click', value)
    emit('update:modelValue', range.value)
    }
    return {
    range,
    modelConfig,
    onClick,
    }
    },
    }
    </script>

    <style>
    </style>