superdesk-ui-framework 4.1.4 → 4.1.5

package/.github/workflows/publish-to-npm.yml

@@ -6,6 +6,7 @@ on:
             - 'develop'
             - 'v3'
             - 'v4'
+            - '4.1.5'
 
 jobs:
     publish:

package/app-typescript/components/DateTimePicker.spec.tsx

@@ -0,0 +1,59 @@
+import {describe, it} from 'mocha';
+import * as assert from 'assert';
+import * as React from 'react';
+import {DateTimePicker} from './DateTimePicker';
+
+function makePicker(overrides: Partial<React.ComponentProps<typeof DateTimePicker>> = {}) {
+    return new DateTimePicker({
+        valueType: 'date',
+        dateFormat: 'MM/DD/YYYY',
+        value: new Date(2024, 0, 1, 13, 30, 45),
+        onChange: () => undefined,
+        allowSeconds: true,
+        ...overrides,
+    } as React.ComponentProps<typeof DateTimePicker>);
+}
+
+describe('DateTimePicker', () => {
+    it('keeps seconds when formatting date values', () => {
+        const picker = makePicker();
+
+        assert.strictEqual(picker.getTimeValue(), '13:30:45');
+    });
+
+    it('keeps seconds when changing time values', () => {
+        let nextValue: Date | null = null;
+        const picker = makePicker({
+            onChange: (value: Date | null) => {
+                nextValue = value;
+            },
+        });
+
+        picker.handleTimeChange('09:05:12');
+
+        assert.notStrictEqual(nextValue, null);
+        const timeValue = nextValue as unknown as Date;
+
+        assert.strictEqual(timeValue.getHours(), 9);
+        assert.strictEqual(timeValue.getMinutes(), 5);
+        assert.strictEqual(timeValue.getSeconds(), 12);
+    });
+
+    it('keeps seconds when changing the date', () => {
+        let nextValue: Date | null = null;
+        const picker = makePicker({
+            onChange: (value: Date | null) => {
+                nextValue = value;
+            },
+        });
+
+        picker.handleDateChange(new Date(2024, 0, 2));
+
+        assert.notStrictEqual(nextValue, null);
+        const dateValue = nextValue as unknown as Date;
+
+        assert.strictEqual(dateValue.getHours(), 13);
+        assert.strictEqual(dateValue.getMinutes(), 30);
+        assert.strictEqual(dateValue.getSeconds(), 45);
+    });
+});

package/app-typescript/components/DateTimePicker.tsx

@@ -46,10 +46,10 @@ export class DateTimePicker extends React.PureComponent<IProps> {
 
     handleTimeChange = (time: string) => {
         if (this.props.valueType === 'date') {
-            const [hours, minutes] = time.split(':').map((x) => defaultTo(parseInt(x, 10), 0));
+            const [hours, minutes, seconds] = time.split(':').map((x) => defaultTo(parseInt(x, 10), 0));
             const origDate = this.props.value ?? new Date();
 
-            origDate.setHours(hours, minutes);
+            origDate.setHours(hours, minutes, this.props.allowSeconds ? seconds : 0);
 
             this.props.onChange(origDate);
         } else if (this.props.valueType === 'object') {
@@ -72,7 +72,11 @@ export class DateTimePicker extends React.PureComponent<IProps> {
             const origDate = this.props.value ?? new Date();
             const selectedDate = new Date(date);
 
-            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+            selectedDate.setHours(
+                origDate.getHours(),
+                origDate.getMinutes(),
+                this.props.allowSeconds ? origDate.getSeconds() : 0,
+            );
 
             this.props.onChange(selectedDate);
         } else if (this.props.valueType === 'object') {
@@ -91,9 +95,13 @@ export class DateTimePicker extends React.PureComponent<IProps> {
 
     getTimeValue(): string | null {
         if (this.props.valueType === 'date') {
-            return this.props.value != null
-                ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
-                : null;
+            if (this.props.value == null) {
+                return null;
+            }
+
+            const seconds = this.props.allowSeconds ? `:${this.prepareFormat(this.props.value.getSeconds())}` : '';
+
+            return `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}${seconds}`;
         } else if (this.props.valueType === 'object') {
             return this.props.value.time ?? null;
         } else {

package/dist/components/DateTimePicker.tsx

@@ -21,6 +21,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
                 valueType="date"
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
+                allowSeconds
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 
@@ -56,6 +57,7 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                         value={this.state.dateTime}
                         dateFormat="YYYY-MM-DD"
                         fullWidth
+                        allowSeconds
                         onChange={(val) => {
                             const parsedVal = val != null ? new Date(val) : null;
 
@@ -75,6 +77,7 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                             value={this.state.dateTime}
                             dateFormat="YYYY-MM-DD"
                             fullWidth
+                            allowSeconds
                             onChange={(val) => {
                                 const parsedVal = val != null ? new Date(val) : null;
 
@@ -100,6 +103,13 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                         default="/"
                         description='Date format to use, i.e. "MM/DD/YYYY".'
                     />
+                    <Prop
+                        name="allowSeconds"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Allow seconds in the time picker."
+                    />
                     <Prop
                         name="onChange"
                         isRequired={true}

package/dist/examples.bundle.js

@@ -134047,9 +134047,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         _this.handleTimeChange = function (time) {
             var _a;
             if (_this.props.valueType === 'date') {
-                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1];
+                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1], seconds = _b[2];
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
-                origDate.setHours(hours, minutes);
+                origDate.setHours(hours, minutes, _this.props.allowSeconds ? seconds : 0);
                 _this.props.onChange(origDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -134068,7 +134068,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 }
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
                 var selectedDate = new Date(date);
-                selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+                selectedDate.setHours(origDate.getHours(), origDate.getMinutes(), _this.props.allowSeconds ? origDate.getSeconds() : 0);
                 _this.props.onChange(selectedDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -134097,9 +134097,11 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.getTimeValue = function () {
         var _a;
         if (this.props.valueType === 'date') {
-            return this.props.value != null
-                ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-                : null;
+            if (this.props.value == null) {
+                return null;
+            }
+            var seconds = this.props.allowSeconds ? ":".concat(this.prepareFormat(this.props.value.getSeconds())) : '';
+            return "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes())).concat(seconds);
         }
         else if (this.props.valueType === 'object') {
             return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : null;
@@ -179796,7 +179798,7 @@ var DateTimePickerExample = /** @class */ (function (_super) {
         return (React.createElement(app_typescript_1.DateTimePicker, { label: "Planning date", 
             //labelHidden
             //inlineLabel
-            fullWidth: true, valueType: "date", value: this.state.dateTime, dateFormat: "YYYY-MM-DD", onChange: function (val) {
+            fullWidth: true, valueType: "date", value: this.state.dateTime, dateFormat: "YYYY-MM-DD", allowSeconds: true, onChange: function (val) {
                 var parsedVal = val != null ? new Date(val) : null;
                 _this.setState({ dateTime: parsedVal });
             } }));
@@ -179816,16 +179818,17 @@ var DateTimePickerDoc = /** @class */ (function (_super) {
     DateTimePickerDoc.prototype.render = function () {
         return (React.createElement("section", { className: "docs-page__container" },
             React.createElement("h2", { className: "docs-page__h2" }, "Date picker"),
-            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <DateTimePicker\n                        label=\"Planning date\"\n                        value={this.state.dateTime}\n                        dateFormat=\"YYYY-MM-DD\"\n                        fullWidth\n                        onChange={(val) => {\n                            const parsedVal = val != null ? new Date(val) : null;\n\n                            this.setState({dateTime: parsedVal});\n                        }}\n                    />\n                "),
+            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <DateTimePicker\n                        label=\"Planning date\"\n                        value={this.state.dateTime}\n                        dateFormat=\"YYYY-MM-DD\"\n                        fullWidth\n                        allowSeconds\n                        onChange={(val) => {\n                            const parsedVal = val != null ? new Date(val) : null;\n\n                            this.setState({dateTime: parsedVal});\n                        }}\n                    />\n                "),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: "docs-page__content-row" },
                         React.createElement(DateTimePickerExample, null))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DateTimePicker\n                            label=\"Planning date\"\n                            value={this.state.dateTime}\n                            dateFormat=\"YYYY-MM-DD\"\n                            fullWidth\n                            onChange={(val) => {\n                                const parsedVal = val != null ? new Date(val) : null;\n\n                                this.setState({dateTime: parsedVal});\n                            }}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DateTimePicker\n                            label=\"Planning date\"\n                            value={this.state.dateTime}\n                            dateFormat=\"YYYY-MM-DD\"\n                            fullWidth\n                            allowSeconds\n                            onChange={(val) => {\n                                const parsedVal = val != null ? new Date(val) : null;\n\n                                this.setState({dateTime: parsedVal});\n                            }}\n                        />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: "value", isRequired: false, type: "Date", default: "null", description: "Value of the component." }),
                 React.createElement(app_typescript_1.Prop, { name: "dateFormat", isRequired: true, type: "string", default: "/", description: 'Date format to use, i.e. "MM/DD/YYYY".' }),
+                React.createElement(app_typescript_1.Prop, { name: "allowSeconds", isRequired: false, type: "boolean", default: "false", description: "Allow seconds in the time picker." }),
                 React.createElement(app_typescript_1.Prop, { name: "onChange", isRequired: true, type: "Function", default: "/", description: "Callback to invoke when value changes." }),
                 React.createElement(app_typescript_1.Prop, { name: "label", isRequired: false, type: "string", default: "/", description: "Label of component." }),
                 React.createElement(app_typescript_1.Prop, { name: "required", isRequired: false, type: "boolean", default: "false", description: "Mark field as required." }),
@@ -195305,7 +195308,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 1050 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.1.4","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"^5.8.3","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.1.5","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"^5.8.3","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 1051 */

package/dist/superdesk-ui.bundle.js

@@ -133394,9 +133394,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         _this.handleTimeChange = function (time) {
             var _a;
             if (_this.props.valueType === 'date') {
-                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1];
+                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1], seconds = _b[2];
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
-                origDate.setHours(hours, minutes);
+                origDate.setHours(hours, minutes, _this.props.allowSeconds ? seconds : 0);
                 _this.props.onChange(origDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -133415,7 +133415,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 }
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
                 var selectedDate = new Date(date);
-                selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+                selectedDate.setHours(origDate.getHours(), origDate.getMinutes(), _this.props.allowSeconds ? origDate.getSeconds() : 0);
                 _this.props.onChange(selectedDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -133444,9 +133444,11 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.getTimeValue = function () {
         var _a;
         if (this.props.valueType === 'date') {
-            return this.props.value != null
-                ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-                : null;
+            if (this.props.value == null) {
+                return null;
+            }
+            var seconds = this.props.allowSeconds ? ":".concat(this.prepareFormat(this.props.value.getSeconds())) : '';
+            return "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes())).concat(seconds);
         }
         else if (this.props.valueType === 'object') {
             return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "4.1.4",
+    "version": "4.1.5",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",

package/react/components/DateTimePicker.js

@@ -81,9 +81,9 @@ var DateTimePicker = /** @class */ (function (_super) {
         _this.handleTimeChange = function (time) {
             var _a;
             if (_this.props.valueType === 'date') {
-                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1];
+                var _b = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _b[0], minutes = _b[1], seconds = _b[2];
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
-                origDate.setHours(hours, minutes);
+                origDate.setHours(hours, minutes, _this.props.allowSeconds ? seconds : 0);
                 _this.props.onChange(origDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -102,7 +102,7 @@ var DateTimePicker = /** @class */ (function (_super) {
                 }
                 var origDate = (_a = _this.props.value) !== null && _a !== void 0 ? _a : new Date();
                 var selectedDate = new Date(date);
-                selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+                selectedDate.setHours(origDate.getHours(), origDate.getMinutes(), _this.props.allowSeconds ? origDate.getSeconds() : 0);
                 _this.props.onChange(selectedDate);
             }
             else if (_this.props.valueType === 'object') {
@@ -131,9 +131,11 @@ var DateTimePicker = /** @class */ (function (_super) {
     DateTimePicker.prototype.getTimeValue = function () {
         var _a;
         if (this.props.valueType === 'date') {
-            return this.props.value != null
-                ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-                : null;
+            if (this.props.value == null) {
+                return null;
+            }
+            var seconds = this.props.allowSeconds ? ":".concat(this.prepareFormat(this.props.value.getSeconds())) : '';
+            return "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes())).concat(seconds);
         }
         else if (this.props.valueType === 'object') {
             return (_a = this.props.value.time) !== null && _a !== void 0 ? _a : null;