ZK 9.6日期时间选择器自定义：添加前后年份切换按钮

核心思路：通过ZK客户端API扩展日历导航栏 #

ZK的DateTimePicker客户端组件内置了日历操作对象，无需修改组件源码，只需在客户端注入脚本，就能扩展出年份切换按钮。

具体实现步骤 #

1. 获取组件客户端实例
   通过组件ID拿到DateTimePicker的客户端对象，假设你的组件ID为myDateTimePicker：

   var dtp = zk.Widget.$('$myDateTimePicker');
   var calendar = dtp._cal; // 获取内置的日历操作对象
   

2. 创建年切换按钮
   复用ZK原有日历按钮的样式，创建<<（上一年）和>>（下一年）按钮，并绑定点击事件：

   // 上一年按钮
   var prevYearBtn = document.createElement('button');
   prevYearBtn.textContent = '<<';
   prevYearBtn.className = calendar.$s('btn'); // 复用默认按钮样式，保证视觉统一
   prevYearBtn.addEventListener('click', function() {
       var currYear = calendar.getYear();
       calendar.setYear(currYear - 1);
       calendar.update(); // 刷新日历显示
   });
   
   // 下一年按钮
   var nextYearBtn = document.createElement('button');
   nextYearBtn.textContent = '>>';
   nextYearBtn.className = calendar.$s('btn');
   nextYearBtn.addEventListener('click', function() {
       var currYear = calendar.getYear();
       calendar.setYear(currYear + 1);
       calendar.update();
   });
   

3. 插入按钮到导航栏
   找到原有月份切换按钮的父容器，将新按钮插入到对应位置（比如<按钮前加<<，>按钮后加>>）：

   var navBar = calendar.$n('nav'); // 日历导航栏元素
   var prevMonthBtn = navBar.querySelector('.' + calendar.$s('prev'));
   var nextMonthBtn = navBar.querySelector('.' + calendar.$s('next'));
   
   prevMonthBtn.before(prevYearBtn);
   nextMonthBtn.after(nextYearBtn);
   

4. 确保脚本执行时机
   需在组件完全渲染后执行上述代码，推荐在页面的zk.afterMount回调中执行，或者监听组件的onCreate事件：

   zk.afterMount(function() {
       // 此处放置上述所有代码
   });
   

关键注意点 #

• 样式一致性：通过calendar.$s('btn')获取ZK内置的按钮样式类，避免新按钮与原有界面风格脱节。
• 边界处理：ZK日历组件会自动处理最小/最大日期限制，调用setYear时无需额外判断年份合法性。
• 版本兼容性：ZK 9.6版本中，_cal属性及setYear/getYear方法均为稳定可用的API，无需担心兼容问题。

内容的提问来源于stack exchange，提问作者Felichino