How to limit the form submission period

1. Usage scenarios

On the form page, if you need to submit data within a fixed period of time, and you are not allowed to fill in the rest period, you can configure it according to this document.

2. Procedure

2.1 Step 1: Page design

Create a form page and add components to be filled in and two single-line text as auxiliary fields: "form start filling time" and "form filling deadline", as shown in Figure 2.1-1.

Figure 2.1-1 form page design

Hide the auxiliary field and set the default value (in the format of "hours: minutes: seconds") as the time period that the form can fill in, as shown in Figure 2.1-2.

Figure 2.1-2 auxiliary field configuration

2.2 Step 2: define and bind variable data sources to components

Define the variable data source behavior, control the component status, and set the default data"NORMAL", as shown in Figure 2.2-1.

Bind a variable data source to the property status of the component on the page, as shown in Figure 2.2-2.

Figure 2.2-1 Define Variable Data sources

Figure 2.2-2 binding variable data sources

2.3 Step 3: JS panel write code

Determine whether the current time is within the fillable time period during page initialization. If no operation is performed within the fillable time period, if it is not within the fillable time period, change all components to disabled and hide the submit button. Figure 2.3-1.

Figure 2.3-1 copy the following code and change the unique identifier

The following code can be directly copied in the JS panel,Note: You need to replace the unique identifier with the unique identifier of the auxiliary field.

export function didMount() {
  var date = new Date;
  let now = date.getTime();//当前时间
  let y = date.getFullYear();//获取当前年份
  let m = date.getMonth() + 1;//获取当前月份
  let d = date.getDate();//获取当前日
  let startnum = this.$("「表单开始填写时间」的唯一标识").getValue().split(":");//获取开始时间
  let endnum = this.$("「表单填写截止时间」的唯一标识").getValue().split(":");//获取截止时间
  let star = new Date(Date.UTC(y, m - 1, d, startnum[0] - 8, startnum[1], startnum[2]));//开始时间(year, month - 1, day, hour-8, minute, second))
  let end = new Date(Date.UTC(y, m - 1, d, endnum[0] - 8, endnum[1], endnum[2]));//结束时间
  if (Number(star) <= Number(now) && Number(now) <= Number(end)) {
    //如果在可填写的时间段不做任何操作
  } else {
    //如果不在可填写的时间段，将组件全部改为禁用并隐藏提交按钮。
    this.setState({
      behavior: "DISABLED"
    })
    this.utils.toast({//弹出提示不在可填写的时间段内
      title: `不在可填写的时间段内,表单提交时间为每天${this.$("「表单开始填写时间」的唯一标识").getValue()}~${this.$("「表单填写截止时间」的唯一标识").getValue()}`,
      type: 'error',
      size: 'large',
    })
    document.getElementsByClassName("deep-form-submit")[0] ? document.getElementsByClassName("deep-form-submit")[0].style.display = "none" : ""//隐藏提交按钮
  }
}

3. Effect demonstration

Figure 3-1 effect demonstration

-------------------- Get the latest information YIDA, welcome to follow US--------------------