QDatetimePicker (quasar-app-extension-qdatetimepicker)

QDatetimePicker is a UI App Extension for Quasar Framework v1. It will not work with legacy versions of Quasar Framework.

This work is currently in beta and minor changes may still happen. Your help with testing is greatly appreciated.

Notes

Minimum required version is Quasar 1.0.0.

Installation

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add qdatetimepicker

Describe

You can use quasar describe QDatetimePicker

Demo

Can be found here.

Example Code

and the data...

data () {
  return {
    date: '2018-11-02',
    time: '15:46',
    datetime: '2018-11-02T15:46'
  }
}

Other Examples

styles

modes

colors

icons

clearable

format24h

display-value

landscape

today-btn and now-btn

target

date and time options

export default {
  data () {
    return {
      dateOptionsA (date) {
        const parts = date.split('/')
        return parts[2] % 2 === 0
      },
      timeOptionsA (hr) {
        return hr % 2 === 0
      }
    }
  },
  methods: {
    dateOptionsB (date) {
      return date >= '2019/02/03' && date <= '2019/02/15'
    },
    timeOptionsB (hr, min, sec) {
      if (hr < 6 || hr > 15 || hr % 2 !== 0) {
        return false
      }
      if (min !== null && (min <= 25 || min >= 58)) {
        return false
      }
      if (sec !== null && sec % 10 !== 0) {
        return false
      }
      return true
    }
  }
}

Language Files

We need help translating the language files. Below are listed the available ones. If you know another language, please PR and help us out.

Completed languages

• German
• English
• French
• Italian
• Portuguese
• Spanish (Latin America)
• Russian

change default icons at Runtime

default icons are reactive, so all components will update properly if you change the $qdtp.icons object.

example 01: in a boot

import { boot } from 'quasar/wrappers'

export default boot(function ({ app }) {
  app.qdtp.icons.date = 'mdi-calendar'
  app.qdtp.icons.time = 'mdi-clock-outline'
})

example 02: in a component

export default {
  mounted () {
    this.$qdtp.icons.date = 'mdi-calendar'
    this.$qdtp.icons.time = 'mdi-clock-outline'
  }
}

example 03: in a vuex module

export default {
  actions: {
    updateIcons () {
      this.$qdtp.icons.date = 'mdi-calendar'
      this.$qdtp.icons.time = 'mdi-clock-outline'
    }
  }
}

example 04: everywhere else

import { icons } from 'quasar-app-extension-qdatetimepicker/src/component'

icons.date = 'mdi-calendar'
icons.time = 'mdi-clock-outline'

SSR note

To avoid hydratations erros, you'll need to ensure any change made at the server side will be reflected at the client side. That will not be a problem if you update the defaults at the both sides (server and client). But if you doing that in the preFetch, so you'll need to create a boot who will serialize the defaults at the server-side and another one who will deserialize at the client-side.

But don't worry, that isn't as bad as seems, this extension already does the most of the work, all what you need to do is add {{{qdtpScript}}} after div#q-app in the index.template.html

src/index.template.html

  
    
  
  
    
    <div id="q-app"></div>
    {{{qdtpScript}}}
  

QDatetimePicker Vue Properties

Donate

If you like (and use) this App Extension, please consider becoming a Quasar GitHub Supporter.