diff --git a/docs/pages/webitel-ui/components/wt-datepicker/Readme.md b/docs/pages/webitel-ui/components/wt-datepicker/Readme.md
index 58c5e2363..234b92e7b 100644
--- a/docs/pages/webitel-ui/components/wt-datepicker/Readme.md
+++ b/docs/pages/webitel-ui/components/wt-datepicker/Readme.md
@@ -1,15 +1,17 @@
 <script setup>
-import Docs from './wt-datepicker-docs.vue';
+import Specs from './component-specs.vue';
 import ExampleDatepicker from './examples/example-datepicker.vue';
 import ExampleDatepickerDatetimeMode from './examples/example-datepicker-datetime-mode.vue';
 </script>
 
-# WtDatepicker
+# `wt-datepicker.vue`
 
-## Props
-::: raw
-<Docs/>
-:::
+## Specs
+
+<Specs />
+
+## PLUS ALL VUE DATEPICKER NATIVE PROPS
+All passed but not declared props are passed to `<vue-datepicker>` component as attributes
 
 ## Example Datepicker
 ::: raw
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/component-specs.vue b/docs/pages/webitel-ui/components/wt-datepicker/component-specs.vue
new file mode 100644
index 000000000..5830b4721
--- /dev/null
+++ b/docs/pages/webitel-ui/components/wt-datepicker/component-specs.vue
@@ -0,0 +1,11 @@
+<script setup>
+import Component from '__lib__/components/wt-datepicker/wt-datepicker.vue';
+</script>
+
+<template>
+  <component-info :info="Component.docs" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/docs/pages/webitel-ui/components/wt-datepicker/wt-datepicker-docs.vue b/docs/pages/webitel-ui/components/wt-datepicker/wt-datepicker-docs.vue
deleted file mode 100644
index ae8422b6a..000000000
--- a/docs/pages/webitel-ui/components/wt-datepicker/wt-datepicker-docs.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <h3>
-    Full docs: <a
-    class="full-docs-link"
-    href="https://vue3datepicker.com/"
-  >Vue
-    Datepicker</a>
-  </h3>
-  <component-model
-    prop="value"
-    event="input"
-  />
-  <component-props
-    :properties="properties"
-  />
-  <component-events
-    :events="events"
-  />
-  <component-slots
-    :slots="slots"
-  />
-</template>
-
-<script>
-import Prism from 'prismjs';
-
-export default {
-  name: 'WtDatepickerDocs',
-  data: () => ({
-    value: Date.now(),
-    properties: [
-      {
-        value: 'value',
-        code: '<wt-datepicker :value="value"></wt-datepicker>',
-        type: '[\'String\', \'Number\'] -- timestamp',
-        default: 'Date.now()',
-      },
-      {
-        value: 'label',
-        code: '<wt-datepicker label="Label"></wt-datepicker>',
-        type: 'String',
-        default: '',
-      },
-      {
-        value: 'disabled',
-        code: '<wt-datepicker disabled></wt-datepicker>',
-        type: 'Boolean',
-        default: 'false',
-      },
-      {
-        value: 'labelProps',
-        code: '<wt-checkbox :label-props="{}"></wt-checkbox>',
-        type: 'Object',
-        description: 'Object with props, passed down to wt-label as props',
-      },
-      {
-        value: 'PLUS ALL VUE DATEPICKER NATIVE PROPS',
-        description: 'All passed but not declared props are passed to <vue-datepicker> component as attributes',
-      },
-    ],
-    events: [
-      {
-        value: 'input',
-        params: [
-          { name: 'timestamp value', type: 'Number' },
-        ],
-      },
-    ],
-    slots: [
-      {
-        name: 'label',
-        scope: [{ name: 'label' }],
-        description: 'Custom label slot',
-      },
-    ],
-  }),
-  mounted() {
-    Prism.highlightAll();
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/docs/pages/webitel-ui/components/wt-timepicker/Readme.md b/docs/pages/webitel-ui/components/wt-timepicker/Readme.md
index 0f44064b9..9b1221bce 100644
--- a/docs/pages/webitel-ui/components/wt-timepicker/Readme.md
+++ b/docs/pages/webitel-ui/components/wt-timepicker/Readme.md
@@ -18,6 +18,7 @@ import ExampleTimepickerDateMode from './examples/example-timepicker-date-mode.v
 | labelProps | Object         | false      | `<wt-timepicker :label-props='obj'></wt-timepicker>`  | Object with props, passed down to wt-label as props                                              |
 | noLabel    | Boolean        | false      | `<wt-timepicker noLabel></wt-timepicker>`             | Not displaying label                                                                             |
 | dateMode   | Boolean        | false      | `<wt-timepicker date-mode></wt-timepicker>`           | If date-mode is true, timepicker asserts value is timestamp and displays/changes timestamp value |
+| required   | Boolean        | false      | `<wt-timepicker required></wt-timepicker>`            | Native input required attribute                                                                  |
 
 ## Events
 
diff --git a/package.json b/package.json
index 9dbe7b498..7b550f0fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.23",
+  "version": "24.12.24",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/components/wt-datepicker/wt-datepicker.vue b/src/components/wt-datepicker/wt-datepicker.vue
index 2848ff5b6..714c314ce 100644
--- a/src/components/wt-datepicker/wt-datepicker.vue
+++ b/src/components/wt-datepicker/wt-datepicker.vue
@@ -14,7 +14,7 @@
         name="label"
         v-bind="{ label }"
       >
-        {{ label }}
+        {{ requiredLabel }}
       </slot>
     </wt-label>
     <vue-datepicker
@@ -80,9 +80,14 @@
 <script setup>
 import VueDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
+
+  /**
+   * [`'date'`, `'datetime'`]
+   * */
+
   mode: {
     type: String,
     default: 'date',
@@ -114,9 +119,22 @@ const props = defineProps({
     type: String,
     default: 'en',
   },
+
+  /**
+   * Object with props, passed down to wt-label as props
+   */
+
   labelProps: {
     type: Object,
-    description: 'Object with props, passed down to wt-label as props',
+  },
+
+  /**
+   * Native input required attribute
+   */
+
+  required: {
+    type: Boolean,
+    default: false,
   },
 });
 const emit = defineEmits(['input']);
@@ -125,6 +143,10 @@ const isOpened = ref(false);
 const datepicker = ref(null); // template ref
 
 const isDateTime = props.mode === 'datetime';
+
+const requiredLabel = computed(() => {
+  return props.required ? `${props.label}*` : props.label;
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/wt-timepicker/wt-timepicker.vue b/src/components/wt-timepicker/wt-timepicker.vue
index d74bf61bd..ed8a2879d 100644
--- a/src/components/wt-timepicker/wt-timepicker.vue
+++ b/src/components/wt-timepicker/wt-timepicker.vue
@@ -8,7 +8,13 @@
       :invalid="invalid"
       v-bind="labelProps"
     >
-      {{ `${label} (${format})` }}
+      <!-- @slot Custom input label -->
+      <slot
+        name="label"
+        v-bind="{ label }"
+      >
+        {{ requiredLabel }}
+      </slot>
     </wt-label>
     <div class="wt-timepicker__wrapper">
       <wt-time-input
@@ -65,6 +71,9 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * Time value in seconds (not milliseconds!)
+     */
     value: {
       type: [String, Number],
       default: 0,
@@ -93,6 +102,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    required: {
+      type: Boolean,
+      default: false,
+      description: 'Native input required attribute',
+    },
   },
 
   computed: {
@@ -154,6 +168,9 @@ export default {
         this.$emit('input', newValue);
       },
     },
+    requiredLabel() {
+      return this.required ? `${this.label} (${this.format})*` : `${this.label} (${this.format})`;
+    },
   },
 
   methods: {},