低代码高性能原生UI框架

Appearance

本页导读

Calendar ​

组件类型：UxCalendarComponentPublicInstance

支持农历显示、节假日显示、单选、多选、拖拽范围选择模式

平台兼容性 ​

UniApp X ​

AndroidiOSweb鸿蒙 Next小程序
√√√x√

UniApp Vue Nvue ​

AndroidiOSweb鸿蒙 Next小程序
xx√xx

Props ​

属性名类型默认值说明
formatString格式化规则
valueArray[now]值
rangeArray范围(例如['2000-01-01','2023-12-10'])
selectModeStringsingle选择模式
lunarBooleantrue显示农历
holidayBooleantrue显示节日
touchableBooleanfalse滑动翻页
themeString$ux.Conf.primaryColor主题
colorString颜色优先级高于主题
backgroundString$ux.Conf.backgroundColor背景色
backgroundDarkString深色none-不显示，auto-自动适配深色模式，其他-颜色
showTodayBooleanfalse显示今日按钮
disabledBooleanfalse是否禁用

selectMode ​

值说明
single单选
muti多选
range范围

lunar ​

值说明
true
false

holiday ​

值说明
true
false

touchable ​

值说明
true
false

backgroundDark ​

值说明
none不显示
auto自动适配深色模式
color其他颜色

showToday ​

值说明
true
false

Events ​

事件名说明参数
click点击时触发
change确定选择时触发

示例代码 ​

html
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll v-if="isOk" :disabled="moving">
			<ux-card direction="column" icon="flag-filled" title="日历" :bold="true">
				<ux-text text="支持农历显示、节假日显示、单选、多选、手指触摸/鼠标拖动范围选择模式"></ux-text>
			</ux-card>
			
			<ux-card>
				<ux-calendar :value="defaults" :range="ranges" :lunar="lunar" :touchable="touchable" :select-mode="mode" :disabled="disabled" format="yyyy年MM月dd日 周" @change="change" @touchstart="touchstart" @touchend="touchend"></ux-calendar>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="参数" :bold="true">
				<ux-text text="支持主题配置、农历显示、滑动翻屏、多选、范围选择、日期范围限制、禁用" :mb="15"></ux-text>
				<ux-col>
					<ux-row>
						<ux-text text="农历显示"></ux-text>
						<ux-switch :checked="lunar" @change="lunarChange"></ux-switch>
						
						<ux-text :ml="20" text="滑动翻屏"></ux-text>
						<ux-switch :checked="touchable" @change="touchableChange"></ux-switch>
					</ux-row>
					
					<ux-row :mt="10">
						<ux-text text="日期多选"></ux-text>
						<ux-switch :checked="muti" @change="mutiChange"></ux-switch>
						
						<ux-text :ml="20" text="范围选择"></ux-text>
						<ux-switch :checked="range" @change="rangeChange"></ux-switch>
					</ux-row>
					
					<ux-row :mt="10">
						<ux-text text="范围限制"></ux-text>
						<ux-switch :checked="rangeLimit" @change="rangeLimitChange"></ux-switch>
						
						<ux-text :ml="20" text="禁用组件"></ux-text>
						<ux-switch :checked="disabled" @change="disabledChange"></ux-switch>
					</ux-row>
				</ux-col>
			</ux-card>
			
			<ux-card icon="arrowright" title="查看日期" :bold="true">
				<ux-text :margin="[10]" v-for="(date, i) in value" :key="i" :text="date.fullDate"></ux-text>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
<template>
	<ux-page :stack="showDoc">
		<ux-navbar :title="title" :bold="true">
			<template v-slot:right>
				<!-- #ifndef MP -->
				<ux-button theme="text" icon="/static/tip.png" :icon-size="22" @click="onDoc()"></ux-button>
				<!-- #endif -->
			</template>
		</ux-navbar>
		
		<ux-scroll v-if="isOk" :disabled="moving">
			<ux-card direction="column" icon="flag-filled" title="日历" :bold="true">
				<ux-text text="支持农历显示、节假日显示、单选、多选、手指触摸/鼠标拖动范围选择模式"></ux-text>
			</ux-card>
			
			<ux-card>
				<ux-calendar :value="defaults" :range="ranges" :lunar="lunar" :touchable="touchable" :select-mode="mode" :disabled="disabled" format="yyyy年MM月dd日 周" @change="change" @touchstart="touchstart" @touchend="touchend"></ux-calendar>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="参数" :bold="true">
				<ux-text text="支持主题配置、农历显示、滑动翻屏、多选、范围选择、日期范围限制、禁用" :mb="15"></ux-text>
				<ux-col>
					<ux-row>
						<ux-text text="农历显示"></ux-text>
						<ux-switch :checked="lunar" @change="lunarChange"></ux-switch>
						
						<ux-text :ml="20" text="滑动翻屏"></ux-text>
						<ux-switch :checked="touchable" @change="touchableChange"></ux-switch>
					</ux-row>
					
					<ux-row :mt="10">
						<ux-text text="日期多选"></ux-text>
						<ux-switch :checked="muti" @change="mutiChange"></ux-switch>
						
						<ux-text :ml="20" text="范围选择"></ux-text>
						<ux-switch :checked="range" @change="rangeChange"></ux-switch>
					</ux-row>
					
					<ux-row :mt="10">
						<ux-text text="范围限制"></ux-text>
						<ux-switch :checked="rangeLimit" @change="rangeLimitChange"></ux-switch>
						
						<ux-text :ml="20" text="禁用组件"></ux-text>
						<ux-switch :checked="disabled" @change="disabledChange"></ux-switch>
					</ux-row>
				</ux-col>
			</ux-card>
			
			<ux-card icon="arrowright" title="查看日期" :bold="true">
				<ux-text :margin="[10]" v-for="(date, i) in value" :key="i" :text="date.fullDate"></ux-text>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
	</ux-page>
</template>
ts
<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	import { UxCalendarEvent, UxCalendarDate, UxSwitchEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const value = ref<UxCalendarDate[]>([] as UxCalendarDate[])
	const ranges = ref<string[]>([] as string[])
	const defaults = ref<string[]>(['2023-12-15', '2023-12-30'] as string[])
	const lunar = ref(true)
	const touchable = ref(true)
	const muti = ref(false)
	const range = ref(false)
	const rangeLimit = ref(false)
	const disabled = ref(false)
	const moving = ref(false)
	const isOk = ref(false)
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/calendar.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		setTimeout(function() {
			isOk.value = true
		}, 100);
	})
	
	const mode = computed(():string => {
		if(muti.value) return 'muti'
		
		if(range.value) return 'range'
		
		return 'normal'
	})
	
	function change(e: UxCalendarEvent) {
		value.value = e.value
	}
	
	function lunarChange(e: UxSwitchEvent) {
		lunar.value = e.value
	}
	
	function touchableChange(e: UxSwitchEvent) {
		touchable.value = e.value
		
		if(touchable.value) {
			range.value = false
		}
	}
	
	function mutiChange(e: UxSwitchEvent) {
		muti.value = e.value
		
		if(muti.value) {
			range.value = false
			touchable.value = true
		}
	}
	
	function rangeChange(e: UxSwitchEvent) {
		range.value = e.value
		
		if(range.value) {
			muti.value = false
			touchable.value = false
		}
	}
	
	function rangeLimitChange(e: UxSwitchEvent) {
		rangeLimit.value = e.value
		
		ranges.value = rangeLimit.value ? ['2023-12-04', '2023-12-20'] : []
	}
	
	function disabledChange(e: UxSwitchEvent) {
		disabled.value = e.value
	}
	
	function touchstart() {
		moving.value = true
	}
	
	function touchend() {
		moving.value = false
	}
</script>
<script setup>
	import * as plus from '@/uni_modules/ux-plus'
	import { UxCalendarEvent, UxCalendarDate, UxSwitchEvent } from '@/uni_modules/ux-frame'
	
	const title = ref('')
	const value = ref<UxCalendarDate[]>([] as UxCalendarDate[])
	const ranges = ref<string[]>([] as string[])
	const defaults = ref<string[]>(['2023-12-15', '2023-12-30'] as string[])
	const lunar = ref(true)
	const touchable = ref(true)
	const muti = ref(false)
	const range = ref(false)
	const rangeLimit = ref(false)
	const disabled = ref(false)
	const moving = ref(false)
	const isOk = ref(false)
	const showDoc = ref(false)
	
	function onDoc() {
		plus.openWeb({
			title: '在线文档',
			url: 'https://www.uxframe.cn/component/calendar.html',
			// blur: 1,
			success: () => {
				showDoc.value = true
			},
			complete: () => {
				showDoc.value = false
			}
		})
	}
	
	onLoad((e) => {
		title.value = e['title'] ?? ''
		
		setTimeout(function() {
			isOk.value = true
		}, 100);
	})
	
	const mode = computed(():string => {
		if(muti.value) return 'muti'
		
		if(range.value) return 'range'
		
		return 'normal'
	})
	
	function change(e: UxCalendarEvent) {
		value.value = e.value
	}
	
	function lunarChange(e: UxSwitchEvent) {
		lunar.value = e.value
	}
	
	function touchableChange(e: UxSwitchEvent) {
		touchable.value = e.value
		
		if(touchable.value) {
			range.value = false
		}
	}
	
	function mutiChange(e: UxSwitchEvent) {
		muti.value = e.value
		
		if(muti.value) {
			range.value = false
			touchable.value = true
		}
	}
	
	function rangeChange(e: UxSwitchEvent) {
		range.value = e.value
		
		if(range.value) {
			muti.value = false
			touchable.value = false
		}
	}
	
	function rangeLimitChange(e: UxSwitchEvent) {
		rangeLimit.value = e.value
		
		ranges.value = rangeLimit.value ? ['2023-12-04', '2023-12-20'] : []
	}
	
	function disabledChange(e: UxSwitchEvent) {
		disabled.value = e.value
	}
	
	function touchstart() {
		moving.value = true
	}
	
	function touchend() {
		moving.value = false
	}
</script>
css
<style lang="scss">

</style>
<style lang="scss">

</style>