Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/TobyMosque/app-extension-qdatetimepicker

QDateTimePicker for Quasar
https://github.com/TobyMosque/app-extension-qdatetimepicker

Last synced: 8 days ago
JSON representation

QDateTimePicker for Quasar

Awesome Lists containing this project

README 

        
QDatetimePicker (quasar-app-extension-qdatetimepicker)

===



QDatetimePicker is a `UI App Extension` for [Quasar Framework v1](https://v1.quasar-framework.org/). 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](https://qdatetimepicker.herokuapp.com/).



# Example Code

```html



```

and the data...

```js

data () {

  return {

    date: '2018-11-02',

    time: '15:46',

    datetime: '2018-11-02T15:46'

  }

}

```



# Other Examples



## styles

```html



```



## modes

```html



```



## colors

```html



```



## icons

```html



```



## clearable

```html



```



## format24h

```html



```



## display-value

```html



```



## landscape

```html



```



## today-btn and now-btn

```html



```



## target

```html



```



## date and time options

```html



```

```js

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

```js

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

```js

export default {

  mounted () {

    this.$qdtp.icons.date = 'mdi-calendar'

    this.$qdtp.icons.time = 'mdi-clock-outline'

  }

}

```



example 03: in a vuex module

```js

export default {

  actions: {

    updateIcons () {

      this.$qdtp.icons.date = 'mdi-calendar'

      this.$qdtp.icons.time = 'mdi-clock-outline'

    }

  }

}

```



example 04: everywhere else

```js

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**

```html



  

    

  

  

    

    


    {{{qdtpScript}}}

  



```



# QDatetimePicker Vue Properties

| Vue Property | Type	|  Description |

|---|---|---|

| label | String | A text label that will `float` up above the input field, once the field gets focus |

| stack-label | Boolean | Label will be always shown above the field regardless of field content (if any) |

| hint | String | Helper (hint) text which gets placed below your wrapped form component |

| hide-hint | Boolean | Hide the helper (hint) text when field is not focused |

| prefix | String | Prefix |

| suffix | String | Suffix |

| color | String | Color name from Quasar Color Palette; Overrides default dynamic color |

| bg-color | String | Color name from Quasar Color Palette; Overrides default dynamic color |

| dark | Boolean | Notify the component that the background is a dark color |

| loading | Boolean | Signals to the user that a process is in progress by displaying a spinner; Spinner can be customized by using the `loading`slot. |

| clearable | Boolean | Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null |

| clear-icon | Boolean | Custom icon to use for the clear button when using along with `clearable` prop |

| filled | Boolean | Use `filled` design for the field |

| outlined | Boolean | Use `outlined` design for the field |

| borderless | Boolean | Use `borderless` design for the field |

| standout | Boolean | Use `standout` design for the field |

| bottom-slots | Boolean | Enables bottom slots (`error`, `hint`, `counter`) |

| counter | Boolean | Show an automatic counter on the bottom right |

| rounded | Boolean | Applies a small standard border-radius for a squared shape of the component |

| square | Boolean | Remove border-radius so borders are squared; Overrides `rounded` prop |

| dense | Boolean | Dense mode; occupies less space |

| items-aligned | Boolean | Align content to match QItem |

| disable | Boolean | Put component in disabled mode |

| readonly | Boolean | Put component in readonly mode |

| lang | Boolean | Language identifier (default: $q.lang.isoName) |

| mode | String | Display Mode (`date`, `time`, `datetime`) (default: `date`) |

| format24h | Boolean | Show the timepicker in 24 hour format. The masked value will not be affected. |

| display-value | Boolean or String | If the value is `true` or a `string`, the internal QInput will be readonly. If the value is `true` the calendar and numeric system used to format the date will not be forced to be the gregorian calendar and latin numbers. If value is a `string`, the format function will be ignored and the `display-value` will be used directly in the `input` (default: `false`) |

| icon | String | The icon of the picker (default: `access_time` when the mode is `time`, otherwise `event`) (obs: `date-icon` and/or `time-icon` props has a high priority) |

| date-icon | String | The icon of the picker when the mode is equals to `date` or `datetime` (default: `event`) |

| time-icon | String | The icon of the picker when the mode is equals to `time` (default: `access_time`) |

| landscape | Boolean | Show the picker in landscape mode (default: false) |

| today-btn | Boolean | Display a button that selects the current day (`date` and `datetime` modes only) (default: false) |

| now-btn | Boolean | Display a button that selects the current time (`time` and `datetime` modes only) (default: false) |

| cover | Boolean | Allows the picker to cover its target. When used, the `fit` props are no longer effective (default: `true`) |

| fit | Boolean | Allows the picker to match at least the full width of its target (default: `true` when target is `self`, otherwise `false`) |

| anchor | String | Two values setting the starting position or anchor point of the menu relative to its target (`top left`, `top middle`, `top right`, `center left`, `center middle`, `center right`, `bottom left`, `bottom middle` or `bottom right`) |

| target | String | Target Mode (`self`: the picker will be opened when the input is clicked, `icon`: the picker will be opened when the icon is clicked) (default: `icon`) |

| calendar | String | Calendar Mode (`gregorian`, `persian`) (default: `gregorian`) |

| date-options | Function or Array | A list of events to highlight on the calendar; If using a function, it receives the date as a String and must return a Boolean (matches or not) |

| time-options | Function | Optionally configure what time the user allowed to set |

| with-seconds | Boolean | Allow the time to be set with seconds |

| disable-popup | Boolean | Removes the `Picker`(a.k.a popup) of the `DatetimePicker`, turning the component in a `DatetimeInput`. Ideal if you wanna the user to type the date and/or time. |

| default-standard | String | serialization standard, the property will be ignored if value isn't null (`iso`, `quasar`) (eg.: `iso`: `yyyy-MM-ddTHH:mm`, `quasar`: `yyyy/MM/dd HH:mm`) (default: `iso`) |

| auto-update-value | Boolean | When the last action in selection mode is completed, the value is updated automatically |



# Donate

If you like (and use) this App Extension, please consider becoming a Quasar [GitHub Supporter](https://donate.quasar.dev).