企业官网建站 小程序开发 云逸学习园地
技术文章 许愿墙
技术文章 PHP学习 Javascript学习 DIV+CSS学习 uniapp学习 HTML学习 微信小程序、公众号知识点 VUE知识学习
您所在的位置>云逸小栈>Javascript学习>正文

js显示当前日期、星期,并可以点击上一天、下一天

2025-04-12 19:55:05 浏览 486

比如:当年日期是:2025年4月12日 星期六

实现方法

html代码:

<view class="kqtop poser">
    <view class="stime dis-row">
	<label class="j1" @click="prevDay"><image :src="imgUrl+'kaoqin/zd1.png'"></image></label>
	<view class="ctimes">{{ displayDate }} {{ displayWeek }}</view>
	<label class="j2" @click="nextDay"><image :src="imgUrl+'kaoqin/zd2.png'"></image></label>
     </view>
     <view class="cuss" v-if="displayDate === tms"><image :src="imgUrl+'kaoqin/jin.png'"></image></view>
</view>

js部分:

import Index from "@/utils/index-model.js"	
let index = new Index()		
export default {
	data() {
		return {
			imgUrl:index.image_url,
			xmId:'',//项目id
			rows:[],
			currentDate: new Date(),
			tms:''
		}
	},
	 computed: {
	    // 格式化日期显示:YYYY年MM月DD日
	    displayDate() {
	      const year = this.currentDate.getFullYear()
	      const month = this.currentDate.getMonth() + 1
	      const day = this.currentDate.getDate()
	      return `${year}年${month}月${day}日`
	    },
	    // 获取星期几
	    displayWeek() {
	      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
	      return weeks[this.currentDate.getDay()]
	    }
	  },
	onLoad(opt) {
		this.currentDate = new Date()
		this.tms = this.curdate(new Date())
		console.log(this.tms,'=====this.tms')
	   if(!opt.bid){
		   index.navigate_back()
	   }
	   if(!uni.getStorageSync('userid')){
		index.show_tips('请登录后再操作')
		index.redirect_to('/pages/mine/Login')
		return false
	   }
	   this.getRows()
	},
	methods: {
		navUrl(url){
			index.navigate_to(url)
		},
		// 上一天
		prevDay() {
		  const newDate = new Date(this.currentDate)
		  newDate.setDate(newDate.getDate() - 1)
		  this.currentDate = newDate
		},
		// 下一天
		nextDay() {
		  const newDate = new Date(this.currentDate)
		  newDate.setDate(newDate.getDate() + 1)
		  this.currentDate = newDate
		},
		curdate(tm) {
			return index.timechina(tm)
		},
		getRows(){
			let send = {
				// projId:this.xmId,
				projId:'2989',
				azhu_id:uni.getStorageSync('userid')
			}
			index.getPublicMember(send,'xian','/wechatTeamX/getTeamKaoqinList','get',res=>{
				if(res.code === 1){
					this.rows = res.data
					if(this.rows.length>0){
						for(let i=0;i<this.rows.length;i++){
							this.rows[i].flag= false
						}
					}
				}
			})
		}
	}
}


网站开发者电话

18066742510

个人微信号
个人公众号
个人小程序
个人抖音