当前位置：首页 > uni-app

uniapp打卡日期

2026-03-04 21:50:55uni-app

uniapp打卡日期实现方法

获取当前日期

使用JavaScript的Date对象获取当前日期，并格式化为需要的字符串形式。可以创建一个工具函数来处理日期格式化：

function formatDate(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
}

const today = formatDate(new Date())

存储打卡记录

使用uniapp的本地存储功能保存打卡记录。可以以日期为键，打卡状态为值：

// 打卡
uni.setStorageSync('punchRecords', {
  ...uni.getStorageSync('punchRecords'),
  [today]: true
})

// 检查是否已打卡
const hasPunched = uni.getStorageSync('punchRecords')[today]

日历组件显示

使用uniapp的<calendar>组件或第三方日历插件显示打卡记录。配置标记点来显示已打卡日期：

const markedDates = Object.keys(uni.getStorageSync('punchRecords')).map(date => ({
  date,
  dots: [{
    color: 'green'
  }]
}))

服务器同步

如果需要多设备同步，可以将打卡记录上传至服务器：

uniapp打卡日期

uni.request({
  url: 'https://your-api.com/punch',
  method: 'POST',
  data: {
    date: today,
    userId: '123'
  }
})

注意事项

时区问题：确保服务器和客户端使用相同时区处理日期
数据清理：定期清理过期的本地打卡记录
用户提示：打卡成功后给予用户反馈提示

完整示例代码

<template>
  <view>
    <button @click="punchIn">打卡</button>
    <calendar :markedDates="markedDates"></calendar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markedDates: []
    }
  },
  methods: {
    punchIn() {
      const today = this.formatDate(new Date())
      const records = uni.getStorageSync('punchRecords') || {}

      if (!records[today]) {
        uni.setStorageSync('punchRecords', {...records, [today]: true})
        this.updateMarkedDates()
        uni.showToast({title: '打卡成功'})
      } else {
        uni.showToast({title: '今日已打卡', icon: 'none'})
      }
    },
    formatDate(date) {
      // 同上文formatDate函数
    },
    updateMarkedDates() {
      const records = uni.getStorageSync('punchRecords') || {}
      this.markedDates = Object.keys(records).map(date => ({
        date,
        dots: [{color: 'green'}]
      }))
    }
  },
  onLoad() {
    this.updateMarkedDates()
  }
}
</script>