diff --git a/ui/components/controls/FrappeControl.vue b/ui/components/controls/FrappeControl.vue
index db6cb830..7f675ca0 100644
--- a/ui/components/controls/FrappeControl.vue
+++ b/ui/components/controls/FrappeControl.vue
@@ -22,6 +22,7 @@ import Password from './Password';
 import Select from './Select';
 import Table from './Table';
 import Text from './Text';
+import Time from './Time'
 
 export default {
     props: ['docfield', 'value', 'onlyInput'],
@@ -43,6 +44,7 @@ export default {
                 Select,
                 Table,
                 Text,
+                Time,
             }[this.docfield.fieldtype];
         }
     }
diff --git a/ui/components/controls/Time.vue b/ui/components/controls/Time.vue
new file mode 100644
index 00000000..41ff8331
--- /dev/null
+++ b/ui/components/controls/Time.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="form-group" v-if="!onlyInput">
+    <label>{{ docfield.label }}</label>
+    <flat-pickr
+      :value="value"
+      :config="config"
+      class="form-control"
+      @on-change="emitChange"
+    >
+    </flat-pickr>
+  </div>
+  <flat-pickr
+    v-else
+    :value="value"
+    :config="config"
+    class="form-control"
+    @on-change="emitChange"
+  >
+  </flat-pickr>
+</template>
+<script>
+import flatPickr from 'vue-flatpickr-component';
+import Data from './Data';
+export default {
+  extends: Data,
+  data(){
+    return{
+      config:{
+        enableTime: true,
+        noCalendar: true
+      }
+    }
+  },
+  components: {
+    flatPickr
+  },
+  methods: {
+    emitChange(times, timeString) {
+      this.$emit('change', timeString);
+    }
+  }
+};
+</script>
+<style lang="scss">
+@import "flatpickr/dist/flatpickr.css";
+</style>
\ No newline at end of file