mobile-frame-h5-example/pages/library/timeFormat/index.vue

<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<view class="u-no-demo-here">输入时间：{{timestamp}}</view>
				<view class="u-demo-result-line">
					{{result}}
				</view>
			</view>
		</view>
		<view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">
				参数配置
			</view>
			<view class="u-config-item">
				<view class="u-item-title">格式</view>
				<u-subsection :list="['yyyy-mm-dd', 'yyyy年-mm月-dd日']" @change="format1Change"></u-subsection>
				<view style="margin-top: 50rpx;">
					<u-subsection  :list="['mm-dd', 'yyyy-mm-dd hh:MM']" @change="format2Change"></u-subsection>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: '2020-11-02T02:59:24.732Z',
				result: null
			}
		},
		onLoad() {
			// 本时间格式化方法，也支持模板中过滤器形式写法，如
			// {{1585926095536 | date('yyyy-mm-dd')}} 或者 {{1585926095536 | date}}，因为'yyyy-mm-dd'为默认的参数
			this.getResult('yyyy-mm-dd');
		},
		methods: {
			format1Change(index) {
				let format = index == 0 ? 'yyyy-mm-dd' : 'yyyy年-mm月-dd日';
				this.getResult(format);
			},
			format2Change(index) {
				let format = index == 0 ? 'mm-dd' : 'yyyy-mm-dd hh:MM';
				this.getResult(format);
			},
			getResult(format) {
				this.result = this.$u.timeFormat(this.timestamp, format);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-demo {}
</style>