Add time support into datetime mask type (#5406)

* Add time support into datetime mask type
surveyjs/survey-library#7997

* add help text

* fix descriptions surveyjs/survey-library#7997

* Update packages/survey-creator-core/src/localization/english.ts

Co-authored-by: RomanTsukanov <RomanTsukanov@users.noreply.github.com>

---------

Co-authored-by: RomanTsukanov <RomanTsukanov@users.noreply.github.com>

packages/survey-creator-core/src/localization/english.ts

@@ -1138,7 +1138,7 @@ export var enStrings = {
       pattern: "Ex.: +1(999)-999-99-99"
     },
     datetimemask: {
-      pattern: "Ex.: mm/dd/yyyy"
+      pattern: "Ex.: mm/dd/yyyy HH:MM:ss"
     },
     currencymask: {
       prefix: "Ex.: $",
@@ -1365,7 +1365,7 @@ export var enStrings = {
       pattern: "The pattern can contain string literals and the following placeholders: `9` - for a digit; `a` - for an upper- or lower-case letter; `#` - for a digit or an upper- or lower-case letter. Use backslash `\\` to escape a character.",
     },
     datetimemask: {
-      pattern: "The pattern can contain separator characters and the following placeholders: `m` - for month number; `mm` - for month number, with leading zero for single-digit values; `d` - for day of the month; `dd` - for day of the month, with leading zero for single-digit values; `yy` - for the last two digits of the year; `yyyy` - for a four-digit year.",
+      pattern: "The pattern can contain separator characters and the following placeholders:<br>`m` - Month number.<br>`mm` - Month number, with leading zero for single-digit values.<br>`d` - Day of the month.<br>`dd` - Day of the month, with leading zero for single-digit values.<br>`yy` - The last two digits of the year.<br>`yyyy` - Four-digit year.<br>`H` - Hours in 24-hour format.<br>`HH` - Hours in 24-hour format, with leading zero for single-digit values.<br>`h` - Hours in 12-hour format.<br>`hh` - Hours in 12-hour format, with leading zero for single-digit values.<br>`MM` - Minutes.<br>`ss` - Seconds.<br>`TT` - 12-hour clock period in upper case (AM/PM).<br>`tt` - 12-hour clock period in lower case (am/pm).",
     },
     numericmask: {
       decimalSeparator: "A symbol used to separate the fractional part from the integer part of a displayed number.",

packages/survey-creator-core/src/property-grid/maskSettings.ts

@@ -1,4 +1,4 @@
-import { Base, JsonObjectProperty, ComponentCollection, Question, PanelModel, QuestionHtmlModel, InputMaskBase, Serializer, JsonMetadataClass } from "survey-core";
+import { Base, JsonObjectProperty, ComponentCollection, Question, PanelModel, QuestionHtmlModel, InputMaskBase, Serializer, JsonMetadataClass, InputMaskDateTime } from "survey-core";
 import { PropertyGridEditorCollection, PropertyJSONGenerator, PropertyGridEditor, } from "./index";
 import { ISurveyCreatorOptions } from "../creator-settings";
 import { getLocString } from "../editorLocalization";
@@ -46,14 +46,28 @@ export class PropertyGridEditorQuestionMaskSettings extends PropertyGridEditor {
   updatePanel(obj: Base, question: Question, prop: JsonObjectProperty) {
     const panel = <PanelModel>question["contentPanel"];
     const masksettings = obj[prop.name] as InputMaskBase;
+
     if (this._prevMaskType !== obj["maskType"]) {
       this._propertyGrid.obj = masksettings;
       this._propertyGrid.setupObjPanel(panel, true);
       this._prevMaskType = obj["maskType"];
     }
+
+    if (masksettings.getType() == "datetimemask") {
+      this.updateDateTimeMinMaxInputType(masksettings, panel);
+    }
+
     this.updatePreviewQuestion(masksettings, panel);
   }
 
+  private updateDateTimeMinMaxInputType(masksettings: InputMaskBase, panel: PanelModel) {
+    let inputType = "datetime-local";
+    if (!(masksettings as InputMaskDateTime).hasDatePart) inputType = "time";
+    if (!(masksettings as InputMaskDateTime).hasTimePart) inputType = "date";
+    panel.getQuestionByName("min").inputType = inputType;
+    panel.getQuestionByName("max").inputType = inputType;
+  }
+
   updatePreviewQuestion(masksettings: InputMaskBase, panel: PanelModel) {
     this._previewQuestion.visible = masksettings.getType() === "masksettings";
     if (!panel.getElementByName(this._previewQuestion.name)) {

packages/survey-creator-core/tests/property-grid/property-grid-mask-settings.tests.ts

@@ -0,0 +1,67 @@
+import { QuestionTextModel } from "survey-core";
+import { PropertyGridModelTester } from "./property-grid.base";
+
+export * from "../../src/property-grid/maskSettings";
+
+test("Mask settings updated if change mask type", () => {
+  const question = new QuestionTextModel("q1");
+  const propertyGrid = new PropertyGridModelTester(question);
+  const masksettingsQuestion = (propertyGrid.survey.getQuestionByName("maskSettings"));
+  expect(masksettingsQuestion).toBeTruthy();
+
+  const panel = masksettingsQuestion.contentPanel;
+  expect(panel.elements.map(e => e.name)).toStrictEqual(["saveMaskedValue", "preview"]);
+
+  question.maskType = "datetime";
+  expect(panel.elements.map(e => e.name)).toStrictEqual(["pattern", "min", "max", "saveMaskedValue", "preview"]);
+
+  question.maskType = "currency";
+  expect(panel.elements.map(e => e.name)).toStrictEqual([
+    "prefix",
+    "suffix",
+    "min",
+    "max",
+    "precision",
+    "decimalSeparator",
+    "thousandsSeparator",
+    "allowNegativeValues",
+    "saveMaskedValue",
+    "preview"]);
+
+  question.maskType = "none";
+  expect(panel.elements.map(e => e.name)).toStrictEqual(["saveMaskedValue", "preview"]);
+});
+
+test("Mask settings DateTime Min/max input types", () => {
+  const question = new QuestionTextModel("q1");
+  question.fromJSON({
+    "maskType": "datetime",
+    "maskSettings": {
+      "pattern": "mm/dd/yyyy HH:MM"
+    }
+  });
+
+  const propertyGrid = new PropertyGridModelTester(question);
+  const masksettingsQuestion = (propertyGrid.survey.getQuestionByName("maskSettings"));
+  expect(masksettingsQuestion).toBeTruthy();
+
+  const panel = masksettingsQuestion.contentPanel;
+  const patternQuestion = panel.getQuestionByName("pattern");
+  const minQuestion = panel.getQuestionByName("min");
+  const maxQuestion = panel.getQuestionByName("max");
+  expect(patternQuestion.value).toBe("mm/dd/yyyy HH:MM");
+  expect(minQuestion.inputType).toBe("datetime-local");
+  expect(maxQuestion.inputType).toBe("datetime-local");
+
+  patternQuestion.value = "mm/dd/yyyy";
+  expect(minQuestion.inputType).toBe("date");
+  expect(maxQuestion.inputType).toBe("date");
+
+  patternQuestion.value = "HH:MM";
+  expect(minQuestion.inputType).toBe("time");
+  expect(maxQuestion.inputType).toBe("time");
+
+  patternQuestion.value = "hh:MM tt";
+  expect(minQuestion.inputType).toBe("time");
+  expect(maxQuestion.inputType).toBe("time");
+});