下面是一个使用 UniApp 开发的日期天数计算器的示例代码,它能实现你所要求的两个功能。创建了一个简单的 UniApp 页面,包含两个功能模块。第一个模块用于设定一个日期并加上指定天数,计算出结果日期;第二个模块用于设定两个日期,计算它们之间相差的天数。代码中运用了 uni.chooseDate 方法让用户选择日期,同时使用 JavaScript 的 Date 对象来进行日期的计算。 ▎最新热文
开发之旅:uniapp开发一个日期天数计算器,
第一个功能:可以设定一个日期后,加上多少天是哪天。
第二个功能设定两个日期,计算中间相差多少天。
<template>
<view class="container">
<view class="section">
<text>设定日期加上天数计算:</text>
<uni-datetime-picker
v-model="startDate1"
type="date"
:start="minDate"
:end="maxDate"
@change="onDate1Change"
>
<template #action>
<input v-model="startDate1" placeholder="请选择日期" readonly />
</template>
</uni-datetime-picker>
<input v-model="daysToAdd" placeholder="请输入天数" type="number" />
<button @click="calculateDateAfter">计算</button>
<text v-if="resultDate1">结果日期: {{ resultDate1 }}</text>
</view>
<view class="section">
<text>计算两个日期相差天数:</text>
<uni-datetime-picker
v-model="startDate2"
type="date"
:start="minDate"
:end="maxDate"
@change="onDate2Change"
>
<template #action>
<input v-model="startDate2" placeholder="请选择开始日期" readonly />
</template>
</uni-datetime-picker>
<uni-datetime-picker
v-model="endDate"
type="date"
:start="minDate"
:end="maxDate"
@change="onEndDateChange"
>
<template #action>
<input v-model="endDate" placeholder="请选择结束日期" readonly />
</template>
</uni-datetime-picker>
<button @click="calculateDaysBetween">计算</button>
<text v-if="daysBetween">相差天数: {{ daysBetween }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
const now = new Date();
const minDate = new Date(now.getFullYear() - 10, 0, 1).toISOString().split('T')[0];
const maxDate = new Date(now.getFullYear() + 10, 11, 31).toISOString().split('T')[0];
return {
startDate1: '',
daysToAdd: '',
resultDate1: '',
startDate2: '',
endDate: '',
daysBetween: '',
minDate,
maxDate
};
},
methods: {
onDate1Change(date) {
console.log('选择的日期:', date);
this.startDate1 = date;
},
onDate2Change(date) {
console.log('选择的日期:', date);
this.startDate2 = date;
},
onEndDateChange(date) {
console.log('选择的日期:', date);
this.endDate = date;
},
calculateDateAfter() {
const start = new Date(this.startDate1);
const days = parseInt(this.daysToAdd);
if (!isNaN(days)) {
start.setDate(start.getDate() + days);
this.resultDate1 = start.toISOString().split('T')[0];
} else {
if (typeof uni !== 'undefined' && typeof uni.showToast === 'function') {
uni.showToast({
title: '请输入有效的天数',
icon: 'none'
});
} else {
console.error('请输入有效的天数');
}
}
},
calculateDaysBetween() {
const start = new Date(this.startDate2);
const end = new Date(this.endDate);
const diffTime = Math.abs(end - start);
this.daysBetween = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}
}
};
</script>
<style>
.container {
padding: 20px;
}
.section {
margin-bottom: 20px;
}
input {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
}
button {
padding: 10px 20px;
background-color: #007aff;
color: white;
border: none;
border-radius: 5px;
}
</style>
原创工具
我用AI开发了一个日期天数计算器小程序,没想到这么火!
原创文章,作者:sourceadmin,如若转载,请注明出处:https://firsource.cn/tool/1934.html