Qjdatetime NPM

QJDatetime

The QJDatetime component provides a method to input dates and time or both in persian system called Jalali. There is also one more version available: QJDatetimePicker. This component have been created just to used in quasar-framework.

Requirements

quasar-framework 17.10.0+

PersianDate library

Installation

First, Install the component by running this command:

npm i qjdatetime

Now, you should make a plugin in your quasar-framework project. It's easy. Just make a file named qjdatetime.js in plugins folder of quasar-framework and add these lines of code to it:

import QJDatetime from 'qjdatetime'

export default ({ app, Vue }) => {
  Vue.use(QJDatetime)
}

You have to edit quasar.conf.js and register the plugin:

{
    "plugins": [
      "qjdatetime"
    ]
}

It's Done. You are ready to enjoy QJDatetime.

Basic Usage

<!-- Only Date -->
<q-j-datetime v-model="model" type="date"/>

<!-- Only Time -->
<q-j-datetime v-model="model" type="time" />

<!-- Date & Time -->
<q-j-datetime v-model="model" type="datetime"/>

Common Usage

<q-j-datetime
    v-model="model"
    float-label="Field Label"
    type="datetime"
    format="YYYY/MM/DD"
    default-view="day"
/>

Vue Properties

Supports v-model which must be a String, Number or PersianDate Object.

Field Name	Usage	Description
type	String	One of `date`, `time` or `datetime`. Default is `date`.
clearable	Boolean	If used, the component offers the user an actionable icon to reset the current value to clear-value (if it is set) or otherwise `default-value`. The icon appears only when the current value matches `clear-value`/`default-value`.
default-value	String/Object	Default color for picker when model is not yet set.
clear-value	String/Object	The value to which to reset the field model to when using `clearable`, unless `default-value` is specified.
minimal	Boolean	Don’t display header.
readonly	Boolean	If set to `true`, component is displayed as read-only.
min	String	Optional minimum value it can take. Has same format as Datetime model.
max	String	Optional maximum value it can take. Has same format as Datetime model.
default-view	String	One of ‘year’, ‘month’, ‘day’, ‘hour’, ‘minute’.
default-value	String/Number/PersianDate	Default date/time for picker when model is not yet set.
display-value	String	Text to display on input frame. Supersedes ‘placeholder’.
first-day-of-week	Number	0-6, 0 - Sunday, 1 Monday, ….
hide-underline	Boolean	Always display with a Popover, regardless of Platform.
popover	Boolean	Always display with a Modal, regardless of Platform.
modal	Boolean	Always display with a Modal, regardless of Platform.
format	String	Format as described on Handling JS Date page under `Format for display section`.
format-model	String	Data type of model (useful especially when starting out with undefined or null). One of ‘auto’, ‘date’, ‘number’, ‘string’.
format24h	Boolean	Override default i18n setting. Use 24 hour time for Material picker instead of AM/PM system which is default.
placeholder	String	Placeholder text for input frame to use when model is not set (empty).
ok-label	String	Text for the button to accept the input (when using Modal).
cancel-label	String	Text for the button to cancel input with no change (when using Modal).
header-label	String	Override weekday string on popup. Applies to Material theme only.

Common input frame properties

Property	Type	Description
prefix	String	A text that should be shown before the value of model.
suffix	String	A text that should be shown after the value of model.
float-label	String	A text label that will “float” up above the input field, once the input field gets focus.
stack-label	String	A text label that will be shown above the input field and is static.
color	String	One from Quasar Color Palette.
inverted	Boolean	Inverted mode. Color is applied to background instead.
inverted-light	Boolean	Inverted mode with a light color. Color is applied to background instead.
dark	Boolean	Is component rendered on a dark background?
align	String	One of ‘left’, ‘center’ or ‘right’ which determines the text align.
disable	Boolean	If set to true, component is disabled and the user cannot change model.
warning	Boolean	If set to true, the input fields colors are changed to show there is a warning.
error	Boolean	If set to true, the input fields colors are changed to show there is an error.
before	Array	of Objects Icon buttons on left side of input frame. Read below more details.
after	Array	of Objects Icon buttons on right side of input frame. Read below more details.
no-parent-field	Boolean	Avoid trying to connect to a parent QField.