SCSS

To override some properties you can import the scss file and modify the default properties

@import 'vue3-date-time-picker/src/Vue3DatePicker/styles/main.scss';
1

Available properties are:

Default Font family of the datepicker

  • $dp__font_family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !default

Default border-radius, apples to the radius of the input, menu, elements in the menu

  • $dp__border_radius: 4px !default

Default cell padding in the menu, changing this value will affect the size of the datepicker

  • $dp__cell_padding: 5px !default

Default radius for the cells in the calendar, inherited from the default border-radius

  • $dp__cell_border_radius: $dp__border_radius !default

Font control, 3 options are set separately, general, for date preview and for time boxes

  • $dp__font_size: 1rem !default
  • $dp__preview_font_size: 0.8rem !default
  • $dp__time_font_size: 2rem !default

Sizing of the cell square, width and height

  • $dp__cell_size: 30px !default

Common padding used in buttons, overlay selections and action row

  • $dp__common_padding: 10px !default
Last Updated: 10/1/2021, 8:42:28 PM