Lower Date Greater Date

LowerThan, LowerThanEquals & GreaterThan, GreaterThanEquals example

These properties are specifically designed for date type fields and allow users to select a date based on the range defined by another field. This functionality enables the creation of dependencies between date fields, meaning that the selected date can be influenced by the value of another date field. By using this feature, you can set parameters that dictate how one date field relates to another, allowing for more dynamic and context-aware date selection.The ised keys are

    lowerThanEquals,
    lowerThan,
    greaterThanEquals,
    greaterThan

[ { "formName": "formName_01" }, { "groups": [ { "groupName": "Informazioni Generali", "tabName": "Dati pratica", "tab": true, "column": true, "content": { "rows": [ { "name": "firstRow", "column": true, "fields": [ { "Type": "date", "id": "firstDate", "label": "First Date", "visible": true }, { "Type": "date", "id": "creationDate_1", "label": "Date 1", "visible": true, "readOnly": false, "lowerThanEquals": true, "lowerThan": [ "firstDate" ] }, { "Type": "date", "id": "creationDate_2", "label": "Date 2", "visible": true, "readOnly": false, "greatherThanEquals": true, "greaterThan": [ "firstDate" ] } ] } ] } } ] }, { "conditions": [] } ]

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin style -->
    <link
      href="https://plugins.wedat.eu/form-builder/plugin.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- this place where plugin will render -->
    <div class="plugin"></div>

    <!-- load plugin JS synchronously -->
    <script src="https://plugins.wedat.eu/form-builder/plugin.js"></script>

    <!-- init plugin options on your JS file or inline JS like this -->
    <script>
      window.FORM_BUILDER.init({
        selector: '.plugin',
        onComplete: (res) => {
          // make what your want :)
          console.log(res)
        },
        data: [
          {
            formName: 'formName_01'
          },
          {
            groups: [
              {
                groupName: 'Informazioni Generali',
                tabName: 'Dati pratica',
                tab: true,
                column: true,
                content: {
                  rows: [
                    {
                      name: 'firstRow',
                      column: true,
                      fields: [
                        {
                          Type: 'date',
                          id: 'firstDate',
                          label: 'First Date',
                          visible: true
                        },
                        {
                          Type: 'date',
                          id: 'creationDate_1',
                          label: 'Date 1',
                          visible: true,
                          readOnly: false,
                          lowerThanEquals: true,
                          lowerThan: ['firstDate']
                        },
                        {
                          Type: 'date',
                          id: 'creationDate_2',
                          label: 'Date 2',
                          visible: true,
                          readOnly: false,
                          greaterThanEquals: true,
                          greaterThan: ['firstDate']
                        }
                      ]
                    }
                  ]
                }
              }
            ]
          },
          {
            conditions: []
          }
        ],
        options: {} // page options
      })
    </script>
  </body>
</html>