低代码高性能原生UI框架

Appearance

本页导读

日期库 ​

uts版本dayjs日期库，几乎和dayjs保持一样的API

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

使用 ​

ts
import { $ux } from '@/uni_modules/ux-frame'

// 获取日期对象 内置几十种函数
const date = $ux.Date.newDate('2024-07-01')

date.doSomething()
import { $ux } from '@/uni_modules/ux-frame'

// 获取日期对象 内置几十种函数
const date = $ux.Date.newDate('2024-07-01')

date.doSomething()

Api ​

事件名参数说明
newDate任意日期数据类型获取datejs对象
toDate{date : string}万能转日期对象
fmtDate{date : string, format : string}万能格式化日期
now-现在 yyyy-MM-dd HH:mm:ss
today{n : number = 0}* n为负则代表取前n天，为正则代表取后n天，0则为今天

示例代码 ​

ts
<script setup>
	import { $ux, LDayutsUnit } from '@/uni_modules/ux-frame';
	
	let title = ''
	const date = ref($ux.Date.today())
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onAdd(unit: LDayutsUnit) {
		date.value = $ux.Date.newDate(date.value).add(1, unit).format('YYYY-MM-DD')
	}
	
	function onSub(unit: LDayutsUnit) {
		date.value = $ux.Date.newDate(date.value).subtract(1, unit).format('YYYY-MM-DD')
	}
</script>
<script setup>
	import { $ux, LDayutsUnit } from '@/uni_modules/ux-frame';
	
	let title = ''
	const date = ref($ux.Date.today())
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function onAdd(unit: LDayutsUnit) {
		date.value = $ux.Date.newDate(date.value).add(1, unit).format('YYYY-MM-DD')
	}
	
	function onSub(unit: LDayutsUnit) {
		date.value = $ux.Date.newDate(date.value).subtract(1, unit).format('YYYY-MM-DD')
	}
</script>
html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="日期库" :bold="true">
				<ux-text text="uts版本dayjs日期库，几乎和dayjs保持一样的API"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="日期库" text="https://www.uxframe.cn/libs/date.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="当前日期" :bold="true">
				<ux-text text="内置几十种日期处理函数，查看文档可了解详情" :mb="15"></ux-text>
				
				<ux-row>
					<ux-button :mr="10" text="减一年" @click="onSub('year')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一年" @click="onAdd('year')"></ux-button>
				</ux-row>
				
				<ux-row :mt="15">
					<ux-button :mr="10" text="减一月" @click="onSub('month')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一月" @click="onAdd('month')"></ux-button>
				</ux-row>
				
				<ux-row :mt="15">
					<ux-button :mr="10" text="减一天" @click="onSub('day')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一天" @click="onAdd('day')"></ux-button>
				</ux-row>
				
			</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>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="日期库" :bold="true">
				<ux-text text="uts版本dayjs日期库，几乎和dayjs保持一样的API"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="日期库" text="https://www.uxframe.cn/libs/date.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="当前日期" :bold="true">
				<ux-text text="内置几十种日期处理函数，查看文档可了解详情" :mb="15"></ux-text>
				
				<ux-row>
					<ux-button :mr="10" text="减一年" @click="onSub('year')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一年" @click="onAdd('year')"></ux-button>
				</ux-row>
				
				<ux-row :mt="15">
					<ux-button :mr="10" text="减一月" @click="onSub('month')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一月" @click="onAdd('month')"></ux-button>
				</ux-row>
				
				<ux-row :mt="15">
					<ux-button :mr="10" text="减一天" @click="onSub('day')"></ux-button>
					
					<ux-text theme="primary" :text="date"></ux-text>
					
					<ux-button :ml="10" text="加一天" @click="onAdd('day')"></ux-button>
				</ux-row>
				
			</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>
css
<style lang="scss">
	
</style>
<style lang="scss">
	
</style>