Datetimepicker

An input with a simple dropdown/modal for selecting a date and time, uses native datetimepicker for mobile

---

edit on github

Examples

<template>
  <section>
    <o-field grouped group-multiline>
      <div class="control">
        <o-switch v-model="showWeekNumber">Show week number</o-switch>
      </div>
      <div class="control">
        <o-switch v-model="enableSeconds">Enable seconds</o-switch>
      </div>
      <o-field label="Locale">
        <o-select v-model="locale">
          <option :value="undefined"></option>
          <option value="de-DE">de-DE</option>
          <option value="en-CA">en-CA</option>
          <option value="en-GB">en-GB</option>
          <option value="en-US">en-US</option>
          <option value="es-ES">es-ES</option>
          <option value="es-MX">es-MX</option>
          <option value="fr-CA">fr-CA</option>
          <option value="fr-FR">fr-FR</option>
          <option value="it-IT">it-IT</option>
          <option value="ja-JP">ja-JP</option>
          <option value="pt-BR">pt-BR</option>
          <option value="ru-RU">ru-RU</option>
          <option value="zn-CN">zn-CN</option>
        </o-select>
      </o-field>
      <o-field label="Hour format">
        <o-select v-model="hourFormat">
          <option :value="undefined"></option>
          <option value="12">12</option>
          <option value="24">24</option>
        </o-select>
      </o-field>
    </o-field>
    <o-field label="Select datetime">
      <o-datetimepicker rounded placeholder="Click to select..." icon="calendar" :locale="locale" :datepicker="{ showWeekNumber }" :timepicker="{ enableSeconds, hourFormat }">
      </o-datetimepicker>
    </o-field>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        showWeekNumber: false,
        enableSeconds: false,
        hourFormat: undefined, // Browser locale
        locale: undefined // Browser locale
      }
    }
  }
</script>

Footer slot

<template>
  <o-field label="Select datetime">
    <o-datetimepicker v-model="datetime" placeholder="Click to select...">
      <div class="buttons-footer">
        <o-button variant="primary" @click="datetime = new Date()">
          <o-icon icon="calendar"></o-icon>
          <span>Today</span>
        </o-button>
        <o-button variant="danger" @click="datetime = null">
          <o-icon icon="times"></o-icon>
          <span>Clear</span>
        </o-button>
      </div>
    </o-datetimepicker>
  </o-field>
</template>

<script>
  export default {
    data() {
      return {
        datetime: new Date()
      }
    }
  }
</script>

<style>
  .buttons-footer {
    margin-top: 1rem;
  }
</style>

Inline

<template>
  <o-datetimepicker v-model="datetime" inline></o-datetimepicker>
</template>

<script>
  export default {
    data() {
      return {
        datetime: new Date()
      }
    }
  }
</script>

Class props

📄 Full scss file

Select datetime

January February March April May June July August September October November December

2033 2032 2031 2030 2029 2028 2027 2026 2025 2024 2023 2022 2021 2020 2019 2018 2017 2016 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980 1979 1978 1977 1976 1975 1974 1973 1972 1971 1970 1969 1968 1967 1966 1965 1964 1963 1962 1961 1960 1959 1958 1957 1956 1955 1954 1953 1952 1951 1950 1949 1948 1947 1946 1945 1944 1943 1942 1941 1940 1939 1938 1937 1936 1935 1934 1933 1932 1931 1930 1929 1928 1927 1926 1925 1924 1923

S

M

T

W

T

F

S

27

28

29

30

31

12

3456789

10111213141516

17181920212223

24252627282930

1

2

3

4

5

6

7

1 2 3 4 5 6 7 8 9 10 11 12

:

00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

AM PM

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
datepickerWrapperClass	Class of the Datepicker wrapper.
timepickerWrapperClass	Class of the Timepicker wrapper.

Props

Prop name	Description	Type	Values	Default
appendToBody		boolean	-
autocomplete	Native options to use in HTML5 validation	string	-
datepicker	Properties and classes to bind to the internal DatePicker	object	-
datetimeCreator		func	-	Default function (see source code)
datetimeFormatter		func	-
datetimeParser		func	-
disabled		boolean	-
editable		boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-
icon	Icon name to be added	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack
iconRight	Icon name to be added on the right side	string	-
iconRightClickable	Make the icon right clickable	boolean	-
inline		boolean	-
locale		string|array	-	From config {    locale: undefined }
maxDatetime		date	-
maxlength	Same as native maxlength, plus character counter	number|string	-
minDatetime		date	-
mobileNative		boolean	-	true
openOnFocus		boolean	-
override	Override classes	boolean	-	false
placeholder		string	-
position	Optional, position of the datepicker relative to the input	string	top-right, top-left, bottom-left
rounded	Makes the element rounded	boolean	-
size	Size of button, optional	string	small, medium, large
statusIcon	Show status icon using field and variant prop	boolean	-	From config {    "statusIcon": true }
timepicker	Properties and classes to bind to the internal TimePicker	object	-
useHtml5Validation	Enable html 5 native validation	boolean	-	From config {    "useHtml5Validation": true }
validationMessage	The message which is shown when a validation error occurs	string	-
value		date	-

Events

Event name	Properties	Description
active-change
icon-right-click
change-month
change-year
blur
focus
invalid
input

Slots

Name	Description	Bindings
footer