日历七天展示

本文介绍了一个Java方法,用于根据给定日期获取所在周的每一天的日期。通过使用SimpleDateFormat和Calendar,该方法能够准确地计算出周一至周日的具体日期,并将其存储在字符串列表中返回。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

public List<String> getTimeInterval(Date date) {
    List<String> dataStr = new ArrayList<>();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    Calendar cal = Calendar.getInstance();
    cal.setTime(date);
    // 判断要计算的日期是否是周日,如果是则减一天计算周六的,否则会出问题,计算到下一周去了
    int dayWeek = cal.get(Calendar.DAY_OF_WEEK);// 获得当前日期是一个星期的第几天
    if (1 == dayWeek) {
        cal.add(Calendar.DAY_OF_MONTH, -1);
    }
    // System.out.println("要计算日期为:" + sdf.format(cal.getTime())); // 输出要计算日期
    // 设置一个星期的第一天,按中国的习惯一个星期的第一天是星期一
    cal.setFirstDayOfWeek(Calendar.MONDAY);
    // 获得当前日期是一个星期的第几天
    int day = cal.get(Calendar.DAY_OF_WEEK);
    // 根据日历的规则,给当前日期减去星期几与一个星期第一天的差值
    cal.add(Calendar.DATE, cal.getFirstDayOfWeek() - day);
    String monday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String tuesday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String wednesday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String thursday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String friday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String saturday = sdf.format(cal.getTime());
    cal.add(Calendar.DATE, 1);
    String sunday = sdf.format(cal.getTime());
    dataStr.add(monday);
    dataStr.add(tuesday);
    dataStr.add(wednesday);
    dataStr.add(thursday);
    dataStr.add(friday);
    dataStr.add(saturday);
    dataStr.add(sunday);
    return dataStr;
}
### 前端实现日历展示方法与组件 #### 使用 Vue 和 TypeScript 构建日历组件 构建一个功能齐全的日历组件涉及多个方面,包括但不限于计算特定月份第一天对应的星期数、处理日期的渲染逻辑以及提供灵活配置选项。 对于基于 Vue 3 和 TypeScript 的解决方案,在创建日历组件时,核心在于确定给定月份的第一天位于周中的哪一天。这有助于正确填充该月之前和之后的日子,从而形成完整的七列布局[^1]: ```typescript function getFirstDayOfMonth(year: number, month: number): number { const date = new Date(year, month - 1, 1); return date.getDay(); } ``` 此函数接收年份和月份作为参数,并返回表示当月初所在星期位置的结果(0 表示星期日)。有了这个信息,便能有效地安排整个表格结构内的其他日子。 为了增强用户体验并使插件更加实用,还可以加入更多特性,比如允许开发者轻松定制样式尺寸、支持选择具体某一日或者定义可选的时间区间等[^2]: ```html <template> <div class="calendar"> <!-- 显示控制按钮 --> <button @click="prevMonth">上个月</button> <span>{{ currentYear }} 年 {{ currentMonth + 1 }} 月</span> <button @click="nextMonth">下个月</button> <!-- 渲染一周七天表头 --> <ul class="weekdays"> <li v-for="(dayName, index) in weekDays" :key="index">{{ dayName }}</li> </ul> <!-- 动态生成一个月内每一天的内容 --> <ul class="dates"> <li v-for="(dateItem, idx) of datesInCurrentView()" :class="{ 'selected': isSelectedDate(dateItem), 'disabled': !isInRange(dateItem) }" :key="idx" @click="selectDate(dateItem)"> {{ dateItem.getDate() }} </li> </ul> </div> </template> ``` 上述模板展示了基础框架的一部分,其中包括用于导航不同月份的操作按键、固定不变的一周名称列表以及动态更新的具体日期单元格集合。通过绑定事件监听器来响应用户的交互行为,如点击改变显示的月份或是选定某个具体的日期。 此外,还应考虑为用户提供直观的方式去调整整体外观大小,确保即使是在移动设备上的表现也能保持良好体验。为此可以在 CSS 中引入变量机制以便于统一管理视觉属性;同时利用 JavaScript 来解析传入的高度宽度值进而作用到内部元素之上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值