nextcloud/core/src/components/GlobalSearch/CustomDateRangeModal.vue

<template>
	<NcModal v-if="isModalOpen"
		id="global-search"
		:name="t('core', 'Date range filter')"
		:show.sync="isModalOpen"
		:size="'small'"
		:clear-view-delay="0"
		:title="t('Date range filter')"
		@close="closeModal">
		<!-- Custom date range -->
		<div class="global-search-custom-date-modal">
			<h1>{{ t('core', 'Date range filter') }}</h1>
			<div class="global-search-custom-date-modal__pickers">
				<NcDateTimePicker :id="'globalsearch-custom-date-range-start'"
					v-model="dateFilter.startFrom"
					:max="new Date()"
					:label="t('core', 'Pick start date')"
					type="date" />
				<NcDateTimePicker :id="'globalsearch-custom-date-range-end'"
					v-model="dateFilter.endAt"
					:max="new Date()"
					:label="t('core', 'Pick end date')"
					type="date" />
			</div>
			<NcButton @click="applyCustomRange">
				{{ t('core', 'Apply range') }}
				<template #icon>
					<CalendarRangeIcon :size="20" />
				</template>
			</NcButton>
		</div>
	</NcModal>
</template>

<script>
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import CalendarRangeIcon from 'vue-material-design-icons/CalendarRange.vue'

export default {
	name: 'CustomDateRangeModal',
	components: {
		NcButton,
		NcModal,
		CalendarRangeIcon,
		NcDateTimePicker,
	},
	props: {
		isOpen: {
			type: Boolean,
			required: true,
		},
	},
	data() {
		return {
			dateFilter: { startFrom: null, endAt: null },
		}
	},
	computed: {
		isModalOpen: {
			get() {
				return this.isOpen
			},
			set(value) {
				this.$emit('update:is-open', value)
			},
		},
	},
	methods: {
		closeModal() {
			this.isModalOpen = false
		},
		applyCustomRange() {
			this.$emit('set:custom-date-range', this.dateFilter)
			this.closeModal()
		},
	},
}
</script>

<style lang="scss" scoped>
.global-search-custom-date-modal {
	padding: 10px 20px 10px 20px;

	h1 {
		font-size: 16px;
		font-weight: bolder;
		line-height: 2em;
	}

	&__pickers {
		display: flex;
		flex-direction: column;
	}

}
</style>