You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

quasar-app-extension-qdatetimepicker

Package Overview
Dependencies
Maintainers
1
Versions
58
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

quasar-app-extension-qdatetimepicker - npm Package Compare versions

Comparing version

1.0.0-rc.16
to
1.0.0-rc.17

src/boot/qdatetimepicker.ssr-client.js
src/boot/qdatetimepicker.ssr-server.js
src/component/datetime-picker.sass

2

package.json
{
"name": "quasar-app-extension-qdatetimepicker",
"version": "1.0.0-rc.16",
"version": "1.0.0-rc.17",
"description": "QDatetimePicker for Quasar",

@@ -5,0 +5,0 @@ "author": "Tobias Mesquita <tobias.mesquita@gmail.com>",

23

README.md

@@ -207,2 +207,24 @@ QDatetimePicker (quasar-app-extension-qdatetimepicker)

## 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
<html>
<head>
<!-- DO NOT need to do any change to the head content -->
</head>
<body>
<!-- DO NOT touch the following DIV -->
<div id="q-app"></div>
{{{qdtpScript}}}
</body>
</html>
```
# QDatetimePicker Vue Properties

@@ -253,2 +275,3 @@ | Vue&nbsp;Property | Type | Description |

| 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`) |

@@ -255,0 +278,0 @@ | auto-update-value | Boolean | When the last action in selection mode is completed, the value is updated automatically |

13

src/component/QDatetimePicker.js

@@ -71,2 +71,6 @@ import Vue from 'vue'

},
disablePopup: {
type: Boolean,
default: false
},
displayValue: {

@@ -185,2 +189,11 @@ type: [ Boolean, String ],

}
},
isReadonly () {
return this.disable || this.target === 'self' || !!this.displayValue
},
hasPopup () {
switch (this.popupBehavior) {
case 'never': return false
case 'always': return true
}
}

@@ -187,0 +200,0 @@ },

4

src/component/QDatetimePicker.json

@@ -178,2 +178,6 @@ {

},
"disable-popup": {
"type": "Boolean",
"desc": "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": {

@@ -180,0 +184,0 @@ "type": "String",

16

src/index.js

@@ -9,12 +9,18 @@ /**

const extendDatetimePicker = function (conf) {
if (conf.ctx.mode.ssr) {
conf.boot.unshift({ path: '~quasar-app-extension-qdatetimepicker/src/boot/qdatetimepicker.ssr-client.js', server: false })
conf.boot.unshift({ path: '~quasar-app-extension-qdatetimepicker/src/boot/qdatetimepicker.ssr-server.js', client: false })
}
conf.boot.unshift('~quasar-app-extension-qdatetimepicker/src/boot/qdatetimepicker.js')
conf.build.transpileDependencies.push(/quasar-app-extension-qdatetimepicker[\\/]src/)
conf.css.push('~quasar-app-extension-qdatetimepicker/src/component/datetime-picker.styl')
if (conf.css.some(style => style.endsWith('.styl'))) {
conf.css.push('~quasar-app-extension-qdatetimepicker/src/component/datetime-picker.styl')
} else {
conf.css.push('~quasar-app-extension-qdatetimepicker/src/component/datetime-picker.sass')
}
}
module.exports = function (api) {
var compatibleWith = api.compatibleWith || function (_, version) {
return api.compatibleWithQuasarApp(version)
}
// compatibleWith('@quasar/app', '^1.0.0-beta.23')
api.compatibleWith('quasar', '^1.0.0')
api.compatibleWith('@quasar/app', '^1.3.0 || ^2.0.0')

@@ -21,0 +27,0 @@ api.registerDescribeApi('QDatetimePicker', './component/QDatetimePicker.json')

14

src/services/render.js

@@ -31,8 +31,7 @@ import {

let { h, self } = that
let isReadonly = self.disable || self.target === 'self' || !!self.displayValue
let isClearable = !!self.values.input && self.clearable && !self.disable && !self.readonly
let component = isReadonly ? QField : QInput
let component = self.isReadonly ? QField : QInput
let children = []
if (isReadonly) {
if (self.isReadonly && !self.disablePopup) {
children.push(this.popup())

@@ -53,3 +52,3 @@ }

}
if (!isReadonly) {
if (!self.isReadonly && !self.disablePopup) {
icons.push(that.trigger())

@@ -68,3 +67,3 @@ }

if (!isReadonly) {
if (!self.isReadonly) {
options.props.clearable = false

@@ -160,2 +159,3 @@ options.props.mask = self.mask

let _default = self.mode === 'time' ? icons.time : icons.date
let _children = !self.disablePopup ? [this.popup()] : []
let trigger = h(QIcon, {

@@ -166,3 +166,3 @@ staticClass: 'cursor-pointer',

}
}, [this.popup()])
}, _children)
return trigger

@@ -169,0 +169,0 @@ }