当前位置： 首页 > news >正文

HTML原生日期插件增加周次显示

news 来源：原创 2025/6/15 19:38:33

在这里插入图片描述

<div id="app" class="box box-info" style="border-top-color:white;"><!-- // 日期部分 --><!-- // 日期部分 --><div class="date-picker-container" style="position: relative; max-width: 200px;"><!-- 日期输入框 --><div class="el-input"><input type="text" class="el-input__inner" style="cursor: pointer;" id="dateInput" readonly placeholder="选择日期"></div><!-- 自定义日历面板 --><div class="custom-calendar" style="position: absolute;background: #fff;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;width: 100%;margin-top: 8px;display: none;" id="calendarPanel"><div class="calendar-header" style="display: flex;justify-content: space-between;align-items: center;padding: 8px 12px;border-bottom: 1px solid #ebeef5;"><span @click="prevMonth" class="el-icon-arrow-left"></span><div id="currentMonth"></div><span @click="nextMonth" class="el-icon-arrow-right"></span></div><div class="calendar-body" style="padding: 8px;" id="calendarBody"></div></div></div><!-- // 日期部分 --><!-- // 日期部分 --></div>

<!-- // 日期部分 -->
<script src="{{ \Illuminate\Support\Facades\URL::asset('js/date_week/date_week.js') }}"></script>
<script src="{{ \Illuminate\Support\Facades\URL::asset('js/date_week/date_year.js') }}"></script>
<script>dayjs.extend(dayjs_plugin_weekOfYear);var Main = {delimiters:['${', '}'],data() {return {loading           : false,// 日期部分// 日期部分// 日期部分currentDate       : dayjs(),selectedDate      : null,calendarVisible   : false,week : ['周一', '周二','周三', '周四','周五', '周六', '周日'],// 日期部分// 日期部分}},methods: {// 日期部分// 日期部分// 日期部分bindEvents() {// 点击输入框显示日历document.getElementById('dateInput').addEventListener('click', () => {this.calendarVisible = !this.calendarVisible;this.$nextTick(() => {this.renderCalendar();});});},// 渲染日历renderCalendar() {const calendarBody = document.getElementById('calendarBody');const currentMonth = document.getElementById('currentMonth');currentMonth.textContent = this.currentDate.format('YYYY年MM月');let s_month = this.currentDate.format('MM');calendarBody.innerHTML = '';// 获取当月信息const firstDay = this.currentDate.startOf('month');const lastDay = this.currentDate.endOf('month');const firstWeekDay = firstDay.day(); // 0=周日, 6=周六// 计算前后月份天数const prevDays = firstWeekDay === 0 ? 6 : firstWeekDay - 1;const nextDays = 42 - (lastDay.date() + prevDays);let day = 1;let weekNum = firstDay.week() - 1;let oo = 0// 展示周几const firstRow  = document.createElement('div');firstRow.style  = 'display: grid;grid-template-columns: 40px repeat(7, 1fr);gap: 4px;margin-bottom: 4px;padding: 4px;border-radius: 4px;';for (let h = 0; h < 8; h++) {if (h == 0) {const firstCell = document.createElement('div');firstCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';firstCell.textContent = '';firstRow.appendChild(firstCell);}else{const firstCell = document.createElement('div');firstCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';firstCell.textContent = this.week[h-1];firstRow.appendChild(firstCell);}}calendarBody.appendChild(firstRow);// 展示周几for (let i = 0; i < 6; i++) {const weekRow = document.createElement('div');weekRow.style = 'display: grid;grid-template-columns: 40px repeat(7, 1fr);gap: 4px;margin-bottom: 4px;padding: 4px;border-radius: 4px;';// 周数单元格const weekCell = document.createElement('div');weekCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';weekCell.textContent = `第${weekNum}周`;weekRow.appendChild(weekCell);for (let j = 0; j < 7; j++) {const dateCell = document.createElement('div');dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;';// 前一个月if (i === 0 && j < prevDays) {const prevDate = firstDay.subtract(1, 'month').date(firstDay.subtract(1, 'month').endOf('month').date() - (prevDays - j - 1));const dated    = prevDate.$d;const date     = new Date(dated);const s_date   = date.getDate();dateCell.textContent = s_date;dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;color: #c0c4cc;cursor: not-allowed;';}// 后一个月else if (day > lastDay.date()) {const nextDate = day - lastDay.date() + oo;dateCell.textContent = nextDate;dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;color: #c0c4cc;cursor: not-allowed;';oo++}// 当月else {dateCell.textContent = day;if (this.selectedDate && this.selectedDate.isSame(dayjs().year(this.currentDate.year()).month(this.currentDate.month()).date(day), 'day')) {dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;background: #409eff;color: #fff;';}day++;}// 点击日期处理dateCell.addEventListener('click', (e) => {if (!dateCell.style.cssText.includes("not-allowed")) {if (!dateCell.classList.contains('other-month')) {const selected = dayjs().year(this.currentDate.year()).month(this.currentDate.month()).date(dateCell.textContent);this.selectedDate = selected;document.getElementById('dateInput').value = selected.format('YYYY-MM-DD');this.calendarVisible = false;this.renderCalendar()}}});weekRow.appendChild(dateCell);}calendarBody.appendChild(weekRow);weekNum++;}// 控制日历显示状态this.$nextTick(() => {const panel = document.getElementById('calendarPanel');if (this.calendarVisible == true) {panel.style = "display: block;width: 30rem;position:fixed;z-index:1000;background: white;"}else{panel.style = "position: absolute;background: #fff;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;width: 100%;margin-top: 8px;display: none;"}});this.$nextTick(() => {const rr = document.getElementById('dateInput');const tt = document.getElementById('calendarPanel');rr.addEventListener('click', function(e) {tt.style = 'display: block;width: 30rem;position:fixed;z-index:1000;background: white;';e.stopPropagation(); // 阻止冒泡到document});// 点击外部区域关闭日历document.addEventListener('click', function(e) {if (!tt.contains(e.target) && e.target !== rr) {tt.style = 'position: absolute;background: #fff;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;width: 100%;margin-top: 8px;display: none;';}});});},// 切换月份prevMonth() {this.currentDate = this.currentDate.subtract(1, 'month');this.renderCalendar();},nextMonth() {this.currentDate = this.currentDate.add(1, 'month');this.renderCalendar();},// 日期部分// 日期部分// 日期部分},mounted() {// this.renderCalendar();this.bindEvents();},created() {var that = this},}var Ctor = Vue.extend(Main)new Ctor().$mount('#app')
</script>
<!-- // 日期部分 -->

date_week.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs=e()}(this,(function(){"use strict";var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return(e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return+(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof b},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else{var a=e.name;D[a]=e,i=a}return!r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new b(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var b=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t)}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},m.$utils=function(){return O},m.isValid=function(){return!(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,f=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=O.p(f),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return O.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return O.s(e.$y,4,"0");case"M":return a+1;case"MM":return O.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return O.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return O.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return O.s(u,2,"0");case"s":return String(e.$s);case"ss":return O.s(e.$s,2,"0");case"SSS":return O.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=O.p(d),m=w(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return O.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g}return l?$:O.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),_=b.prototype;return w.prototype=_,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){_[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),w.extend=function(t,e){return t.$i||(t(e,b,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w}));

date_year.js

/*** Skipped minification because the original files appears to be already minified.* Original file: /npm/dayjs@1.11.9/plugin/weekOfYear.js** Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_plugin_weekOfYear=t()}(this,(function(){"use strict";var e="week",t="year";return function(i,n,r){var f=n.prototype;f.week=function(i){if(void 0===i&&(i=null),null!==i)return this.add(7*(i-this.week()),"day");var n=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var f=r(this).startOf(t).add(1,t).date(n),s=r(this).endOf(e);if(f.isBefore(s))return 1}var a=r(this).startOf(t).date(n).startOf(e).subtract(1,"millisecond"),o=this.diff(a,e,!0);return o<0?r(this).startOf("week").week():Math.ceil(o)},f.weeks=function(e){return void 0===e&&(e=null),this.week(e)}}}));

相关文章：

  • 审计效率升级！Word一键批量给数字添加千位分隔符
  • 科技评论：Jim Keller 的“反向”战略：RISC-V 成为中国应对美国芯片封锁的关键武器
  • AnythingLLM配置Milvus后，上传文档提示向量数据库标识符错误的解决办法
  • Google reCAPTCHA实现
  • milvus 总结
  • Electron-vite【实战】MD 编辑器 -- 编辑区（含工具条、自定义右键快捷菜单、快捷键编辑、拖拽打开文件等）
  • 微服务架构中的 Kafka：异步通信与服务解耦（二）
  • 0611的
  • Intel Boot Guard
  • RAG的5种高效切分策略：提升检索增强生成效果的关键
  • Linux进程管理：创建，终止，等待
  • Linux611 libvirtb ；FTP vsftpd.conf部分配置文件
  • C#简单线程启动的几种方法总结
  • npm包 本地测试流程
  • 为 Nginx 配置 HTTPS（以 n8n 为例）完整教程【CentOS 7】
  • 时序数据库IoTDB数据模型建模实例详解
  • Java使用Selenium反爬虫优化方案
  • Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
  • Linux(Centos 7.6)命令详解：whoami
  • 时序数据库Influxdb3 core安装
  • 外国人可以在中国做网站吗/seo整站优化费用
  • 深圳正规网站建设/广州seo全网营销
  • 大连市那里做网站宣传的好/十大最免费软件排行榜
  • 网站怎样做优化调整/深圳搜索竞价账户托管
  • 可以做免费广告的网站有哪些/网站收录查询系统
  • 即墨网站建设/广告软文范例200字