如何限制日期选择器时间范围

在软件开发和网页设计中，日期选择器是一个常用的工具，它为用户提供了一种方便的方式来选择日期。然而，在某些情况下，我们可能需要限制日期选择器的时间范围，以满足特定的业务需求。

在本文中，我将介绍一种通过事件实现的方法，供大家参考。

SpreadJS中，我们可以通过获取单元格的样式信息来判断当前的单元格是否为日期选择器：

1. sheet.getStyle(row, col).cellButtons[0].command === "openDateTimePicker"

复制代码

如果是日期选择器我们才会进行下一步的判断，比如当选择的时间小于当前的时间时，我们会告诉用户不允许修改，因为选择的日期不得遭遇当前时间，逻辑如下：

1. if (newDate < Date.now()) {
   
2.   let cell = sheet.getCell(row, col);
   
3.   cell.value(info.oldValue);
   
4.   alert("非法修改，日期不得早于当前时间！");
   
5. }

复制代码

然后我们将以上两个部分组合在CellChanged事件中：

1. sheet.bind(GC.Spread.Sheets.Events.CellChanged, function (e, info) {
   
2.   if (!info.isUndo) {
   
3.     let row = info.row;
   
4.     let col = info.col;
   
5.     if (
   
6.       sheet.getStyle(row, col).cellButtons[0].command === "openDateTimePicker"
   
7.     ) {
   
8.       let newDate = info.newValue;
   
9.       console.log(newDate);
   
10.       if (newDate < Date.now()) {
    
11.         let cell = sheet.getCell(row, col);
    
12.         cell.value(info.oldValue);
    
13.         alert("非法修改，日期不得早于当前时间！");
    
14.       }
    
15.     }
    
16.   }
    
17. });

复制代码

但是由于修改的逻辑(cell.value())存在于CellChanged事件中，若不加干预，则会变成一个死循环，要调整此处的逻辑，需要先关闭事件响应机制，等修改的逻辑执行完，再开启事件响应机制。

完整代码如下：

1. window.onload = async () => {
   
2.   let ifDesigner = true;
   
3.   let designer, spread, sheet;
   
4. 
   
5.   if (ifDesigner) {
   
6.     let designerConfig = JSON.parse(
   
7.       JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
   
8.     );
   
9. 
   
10.     designer = new GC.Spread.Sheets.Designer.Designer(
    
11.       "gc-designer-container",
    
12.       designerConfig
    
13.     );
    
14. 
    
15.     spread = designer.getWorkbook();
    
16.   } else {
    
17.     spread = new GC.Spread.Sheets.Workbook(
    
18.       document.getElementById("gc-designer-container"),
    
19.       { sheetCount: 1 }
    
20.     );
    
21.   }
    
22. 
    
23.   sheet = spread.getActiveSheet();
    
24. 
    
25.   window.designer = designer;
    
26.   window.spread = spread;
    
27.   window.sheet = sheet;
    
28. 
    
29.   sheet.bind(GC.Spread.Sheets.Events.CellChanged, function (e, info) {
    
30.     if (!info.isUndo) {
    
31.       let row = info.row;
    
32.       let col = info.col;
    
33.       if (
    
34.         sheet.getStyle(row, col).cellButtons[0].command === "openDateTimePicker"
    
35.       ) {
    
36.         let newDate = info.newValue;
    
37.         console.log(newDate);
    
38.         if (newDate < Date.now()) {
    
39.           let cell = sheet.getCell(row, col);
    
40. 
    
41.           sheet.suspendEvent();
    
42.           cell.value(info.oldValue);
    
43.           sheet.resumeEvent();
    
44. 
    
45.           alert("非法修改，日期不得早于当前时间！");
    
46.         }
    
47.       }
    
48.     }
    
49.   });
    
50. };
    

复制代码