Vue2 Clock Picker

A simple clock picker component for vue v2.x.

Installation

$ npm install @pencilpix/vue2-clock-picker --save

or

$ yarn add @pencilpix/vue2-clock-picker

• In Browser:

  1. via plugin

  <link href="node_modules/@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css"/>
  
  
  <script src="node_modules/vuejs/dist/vue.min.js"></script>
  <!-- plugin will register the component globally in the global vue instance -->
  <script src="node_modules/@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.plugin.js"></script>
  
  
  <!-- if for any reason need to install the plugin manually -->
  <script>
  Vue.use(VueClockPickerPlugin) // since the plugin is globally available
  </script>

  2. via per component

  <link href="node_modules/@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css"/>
  
  
  <script src="node_modules/vuejs/dist/vue.min.js"></script>
  <script src="node_modules/@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.js"></script>
  <script>
    const app = new Vue({
      // ...
      components: {
        VueClockPicker, //  bundle makes the component globally available for registering
      },
      // ...
    });
  </script>

• Module:

  1. per component

  import VueClockPicker from '@pencilpix/vue2-clock-picker';
  import '@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css';
  
  export default {
    // ...
    components: {
      VueClockPicker,
    }
    // ...
  }

  2. global plugin

  import '@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css';
  const VueClockPickerPlugin = require('@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.plugin.js')
  Vue.use(VueClockPickerPlugin)

Usage

once component is installed it can be used as:

<vue-clock-picker v-model="value"></vue-clock-picker>

props

prop	type	default
id	String	input id and label for value. default is randomly unique like: clock_picker_input_jj17bvjklhwhxvm
placeholder	String	input placeholder default ''
name	String	input name default ''
label	String	label text will be hidden if not set. default ''
input-class	String	css custom class to be applied to input. default clock-picker__input.
input-container-class	String	css custom class to be applied to input container. default clock-picker__input-container.
input-value-class	String	css custom class to be applied to input container when input contains value. default clock-picker__input--has-value.
input-focus-class	String	css custom class to be applied to input container when the input is focused. default clock-picker__input--focused.
input-error-class	String	css custom class to be applied to input container when the value not match HH:MM or the input is required and the value is empty. default clock-picker__input--error.
label-class	String	custom class name of label. default: clock-picker__label
value	String	initial value of input. default ''
required	Boolean	set it to true if time field is required. default false
disabled-from	String	value of time to disable from until disabled-to value or to the end. default null.
disabled-to	String	value of time to disable from disabled-to time value or from 00:00 to, default null.
disabled-fn	Function	(Hour, minute) => boolean; A function to expose the disable logic. If passed, "disabled-from" and "disabled-to" are ignored.
Param
done-text	String	done button text, default done.
cancel-text	String	cancel button text, default cancel.
active-color	String	active value bg color, header of dialog bg, center color and line color. Default: #a48bd1.
active-text-color	String	active value color and actions color. default: white.
color	String	regular text color. default: #757575.
disabled-color	String	disabled actions and values color, default: #ddd.
close-on-esc	Boolean	enable close on ESC key press, default false.
close-on-overlay	Boolean	enable closing dialog on overlay click, default false.
font	String	font family used in canvas, default Roboto, arial, san-serif

events

event	when
beforeOpen	just before opening the dialog.
open	just after opening the dialog.
beforeClose	just before closing the dialog.
close	just after closing the dialog.
timeset	after the value of input is set. and it will recieve the value as 01:02
cancel	when cancel dialog button is clicked and it will receive the value found at cancel time.

methods

method	behavior
open	open the dialog
close	close the dialog
getValue	return the current value of the input as 02:00
setValue	set the current value of input and it accept String with valid time HH:MM
validate	check for errors. it can be used just before submit the form.