Released: April 16, 2024

SurveyJS v1.9.139 includes a release version of the input mask feature and an enhanced, more readable read-only / preview mode UI for surveys.

Input mask support, which has been in beta testing, is now officially released and suitable for use in production. This release fixes known issues and introduces time mask support in addition to already available numeric, currency, date, and pattern mask types.

View Demo

Time masks are configured as part of the date and time mask type. You can use the following placeholders to add time to a date mask or create a strictly time mask:

• H - Hours in 24-hour format.
• HH - Hours in 24-hour format, with leading zero for single-digit values.
• h - Hours in 12-hour format.
• hh - Hours in 12-hour format, with leading zero for single-digit values.
• MM - Minutes.
• ss - Seconds.
• TT - 12-hour clock period in upper case (AM/PM).
• tt - 12-hour clock period in lower case (am/pm).

The following code shows how to configure a date and time mask:

const surveyJson = {
  "elements": [
    {
      "type": "text",
      "name": "date",
      "title": "Date and time:",
      "maskType": "datetime",
      "maskSettings": {
        "pattern": "mm/dd/yyyy HH:MM" // 12/31/1999 23:59
      }
    }
  }
}

Read-only mode is useful for presenting information that users can view but not edit. This mode helps prevent unauthorized form modifications and share information without the risk of accidental changes. Similarly, preview mode allows respondents to review their answers before submitting them. In SurveyJS v1.9.139, these modes receive a UI update. The most noticeable difference is that input field values are no longer shaded, which makes them more readable.

Previous read-only UI:

Updated read-only UI:

Previous preview UI:

Updated preview UI:

Dashboard: Visualize Text Entry Questions as Charts

Dashboard: Gauge Chart Customization

Form Library: Custom Navigation Buttons

Form Library

• Ranking: Enhance performance with many items (#8108)
• [Mobile] The Cancel button is not translated in Dropdown (#8113)
• Currency Input Mask: A decimal comma separator disappears when a currency value is copied to another field (#8087)
• Enhance survey preview performance (#8088)
• IAction: A custom localizable title is not applied when a survey locale is defined before a custom action is added to the survey (#8093)
• Custom questions: Prevent panels and pages from being registered as a specialized question type (#8081)
• [Knockout / jQuery] The completedHtml property cannot be updated within the onComplete event handler (#8082)
• Image Picker: A long capture makes a corresponding image overlap with the neighboring one (#8101)

Survey Creator

• Translation tab: Translations appear in a different order after switching between tabs (#5348)

npm i survey-core@1.9.139 survey-angular-ui@1.9.139 --save
npm i survey-creator-core@1.9.139 survey-creator-angular@1.9.139 --save
npm i survey-analytics@1.9.139 --save
npm i survey-pdf@1.9.139 --save

npm i survey-core@1.9.139 survey-react-ui@1.9.139 --save
npm i survey-creator-core@1.9.139 survey-creator-react@1.9.139 --save
npm i survey-analytics@1.9.139 --save
npm i survey-pdf@1.9.139 --save

npm i survey-core@1.9.139 survey-vue3-ui@1.9.139 --save
npm i survey-creator-core@1.9.139 survey-creator-vue@1.9.139 --save
npm i survey-analytics@1.9.139 --save
npm i survey-pdf@1.9.139 --save

npm i survey-core@1.9.139 survey-vue-ui@1.9.139 --save
npm i survey-creator-core@1.9.139 survey-creator-knockout@1.9.139 --save
npm i survey-analytics@1.9.139 --save
npm i survey-pdf@1.9.139 --save

<link href="https://unpkg.com/survey-core@1.9.139/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@1.9.139/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-knockout-ui@1.9.139/survey-knockout-ui.min.js"></script>

<link href="https://unpkg.com/survey-creator-core@1.9.139/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@1.9.139/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-knockout@1.9.139/survey-creator-knockout.min.js"></script>

<link href="https://unpkg.com/survey-analytics@1.9.139/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@1.9.139/survey.analytics.min.js"></script>

<script src="https://unpkg.com/survey-pdf@1.9.139/survey.pdf.min.js"></script>