mariomka / vue-datetime Goto Github PK
View Code? Open in Web Editor NEWMobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
Home Page: http://mariomka.github.io/vue-datetime
License: MIT License
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.
Home Page: http://mariomka.github.io/vue-datetime
License: MIT License
First of all. Great work. Is really hard to find a well-designed-mobile-friendly component for datetime.
Im playing a bit with this mixed with VueFormly, and Im doing the following:
import datepicker from "./views/components/Datepicker.vue"
VueFormly.addType('datepicker', datepicker);
Then Im wrapping your component like this:
<template>
<div>
<label>Datetime</label>
<datetime v-model="model[field.key]"
placeholder="Choose a Date"
type="datetime"
input-format="DD-MM-YYYY HH:mm"
auto-continue></datetime>
<error-display :form="form" :field="field.key"></error-display>
</div>
</template>
<script>
import Vue from 'vue'
import baseField from 'vue-formly-bootstrap/src/fields/baseField';
import Datetime from 'vue-datetime';
Vue.use(Datetime);
export default {
mixins: [baseField]
}
</script>
Finally calling it from my Vue-Formly fields:
{
required: true,
key: 'startDate',
type: 'datepicker',
templateOptions: {
text: 'Data Inicio',
classInline: true
}
},
The component displays flawlessly, I can select a date and time, and it grabs the data and shows it into the form. The problem is that im getting some errors in console that I would like to solve.
1. [Vue warn]:Invalid prop: type check failed for prop "value". Expected String, got Undefined.
2. [Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'length' of undefined"
Can you help me please? And again, thanks for the hard work.
Tanks for the project, it's the most beautiful datepicker that I found. But I need select range times in the same day. This could be a new feature. Tanks, bye.
I set this date in the datepicker:
testdate: '2017-12-30T00:00:00.000+01:00',
<datetime v-model="testdate" type="date" value-zone="Europe/Vienna" auto></datetime>
But for some reason i cant explain i get this in the input: 29.Dez.2018
if i change the type to "date time" i get this in the input: 30.Dez.2018, 00:00
Can some one explain this?
There is no way to set the time in 12hrs format, i have tried to found any ways to set the format of time displayed at the time of selection in 12hrs format but there isn't any way to do it can you have any idea why is it like that... @mariomka
Help me please. Why I got this error? How to fix it?
TypeError: Vue.component is not a function
at plugin (vue-datetime.js:718)
at resolveAsyncComponent (vue.esm.js:2338)
at createComponent (vue.esm.js:4219)
at _createElement (vue.esm.js:4420)
at createElement (vue.esm.js:4357)
at Proxy.vm._c (vue.esm.js:4489)
at Proxy.eval (eval at createFunction (vue.esm.js:10680), <anonymous>:2:584)
at Vue._render (vue.esm.js:4544)
at Vue.updateComponent (vue.esm.js:2788)
at Watcher.get (vue.esm.js:3142)
function plugin (Vue) {
Vue.component('datetime', Datetime);
}
I use Symfony 4, webpack and yarn.
And built it by command
yarn run encore dev
import Vue from 'vue'
import Datetime from 'vue-datetime'
import 'vue-datetime/dist/vue-datetime.css'
(function () {
new Vue({
el: '#app',
components: {
datetime: Datetime
}
});
})();
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVueLoader()
.addEntry('app', './assets/js/app.js')
;
module.exports = Encore.getWebpackConfig();
Sorry for this dumb question but how do i download the script files for using it in the <script> tag?
If you use a minute step that's greater than 1 and you open a datetime picker without a value set, it defaults to the current time. However, if the current minute is not an interval of the minute-step, the minute will not show up. The current minute will need to be rounded to the nearest step value.
I'm unable to preset date. For example
v-model='date' and date=1368457233 | 2013-01-10T23:02:28.037Z does not relay
**note the use of | to denote different values not simultaneous
Using vue-cli with webpack.
Languange support does not work well.
Using moment-locale="es" in dev works.
Using the same in production (npm run build) obtain a null error in the locale loading.
But, if you use moment-locale="en" works well.
Use vue-cli with webpack.
Add de component
<datetime ... moment-locale="es" ...>
npm run dev --> works
npm run build, serve -s dist, --> null exception
During using this component appears bug with overlay. Z-index don`t work. The problem in VUE single file components behavior and scoped style. The overlay box opens inside input box, not outside it.
About steps. I make simple steps when catch the bug: 1. Registr vue-datetime globaly 2. Import vue-datetime component in SFC (.vue) as "datetime", 3. Insert it in HTML with v-model as <datetime v-model=""datetime.start"/>. And then overlay opens inside tag of datetime component.
I think this is a good variant to resolve it with "vue-dom-portal" - because this plugin move it to uppper level and append it to "body" tag.
The documentation says prop format
has type String
. But by providing a string, an Invalid prop: type check failed for prop "format". Expected Object, got String.
error is thrown.
It would be cool to have the possibility to unset a value previously set.
I tried to implement it on my side but when i set the model to an empty string, the value watcher fires an error:
Error in callback for watcher "value": "TypeError: Cannot read property 'clone' of null"
Including a reproduction would be great. You can fork this fiddle: https://jsfiddle.net/ofc30uv3/
It may be useful to include a prop to control whether or not the calendar displays first by default. Would be useful in scenarios when this component is hidden and the UI contains separate date/time input elements. Along the same lines, it would be helpful to emit a changed event with the date/time parsed into an object rather a string.
Currently the time selection is in 24 hour format. How can I change that to 12 hour?
How to add onchange listener on the field for validation?
I think this module is perfect, but looks like needs some other things
the opposite of disabled-dates
<datetime v-model="date" type="date" input-format="YYYY-MM-DD" wrapper-class="my-wrapper-class" input-class="my-input-class" max-date="2017-12-14" min-date="2017-12-10" @okbtnCallback="mycallback" required></datetime>
Error: Failed to mount component: template or render function not defined.
this is what i get when i import datetime into my document.
vuejs 2.x
Is there a way to use the Carbons default format, that is returned by the Laravel Eloquent models?
Like this one: 2018-02-07 13:20:48
if i install vue-datetime then it removes the vue-moment, and if I install vue-moment then vue-datetime is removed. can i have both installed?
i use the following to do installation
npm install vue-moment
npm install vue-datetime
This is a front-end stuff related issue I encountered when using the calendar show at the top of modal form. So basically, I have a modal form that has a date field on it and when clicking on the date field it will open the calendar but the transition upon opening it is not smooth in my end. I think there's some glitch in it happens.
I tried adding some css to make it at the top of all elements but the issue still exist. I dunno if you can replicate this one.
Note: This only happens at the very start opening the calendar.
After a couple of seconds
Is it possible to use only as Time Picker?
Hi there!
Computed property inputValue not equals value prop. It is properly behavior ?
https://monosnap.com/file/USxloM0JiJTe9PyOJqtSVyHIfrUOLU
https://gist.github.com/zmts/4d4cb7ddb6c7107faeb84256b0c951c3
In the documentation it says it is string but when i try string i get errors.
I wish there were more examples for using the format.
How can i set this format for example: dd.mm.yyyy
After installing this module, I get the following error: Can't resolve 'vue-datetime'
.
I believe it's because the main file in package.json
is dist/index.js
, but that file doesn't exist because of the .gitignored dist folder.
By the way, great job on this module, the demo looks fantastic.
After installing and registering globally I'm using it like so in a component:
<datetime v-model="selectedDayString" monday-first></datetime>
and selectedDayString
being '2017-12-02'
I get
[Vue warn]: Error in render function: "TypeError: e._g is not a function"
found in ---> <Datetime>...
Any idea what I'm doing wrong here?
When you change the year and don't click on the date and just click ok, the date is not changing. Suppose, the original date 13/11/2017 and I only change the year to 2016, the desired date should be 13/11/2016 but the output which I get 13/11/2017. The expected behaviour should be that any change month, day or year should trigger an update to change the date to the selected date. The current behaviour is that it is mandatory to trigger a click event (to select the day) after you have selected the year.
Feature Request:
Allow to customize the "newDay" format.
The reason is that the default format "ddd, MMM D" does not make much sense for french people in example (almost not readable). It would be useful to customize it.
Here is possible new prop dayFormat
:
props: {
dayFormat: {
type: String,
default: 'ddd, MMM D'
},
}
...
newDay () {
return this.newDate.format(this.dayFormat)
}
Thanks you,
The mondayFirst
prop can probably be removed from the public props if you grab the value directly from moment.js
const mondayFirst = moment.localeData(this.momentLocale).firstDayOfWeek() === 1;
This would be a little bit easier to only pass the locale to the <datetime/>
and let the component detects the mondayFirst
value automatically for us.
Settings. DefaultLocale = "zh - cn"
The mobile browser doesn't work.
I'm working on a new 1.x version. It'll be similar to current 0.x version and it'll include some of the requested features. moment
dependency will be replaced by luxon
and it'll be dropped out from the build (right now moment
is built-in... I know it's wrong).
Also, the new version will be fully tested and provide CommonJS, ES6 Module and browser version.
I hope to publish an alpha version soon.
Therefore the current version only will be updated to solve bugs.
sometime we need to leave the input as null value, just nothing input...
I'm pretty sure this a bug. emitInput()
will always fire upon creation (see dateTime component's created()
method), even though the input value has not changed. I'm happy to do a PR if needed.
When using minDate and maxDate with minutes, you still can select minutes and hours in time picker out of range
I would like to be able to change the datepicker type dinamically.
Is it posible to add that feature?
Hello,
with :minute-step="15" minute "00" cannot be selected
open complete demo on https://mariomka.github.io/vue-datetime/
tried on current firefox and chrome
Hi @mariomka
Selected time does not match with the data model. It shows the server time. Same happens in the provided demo.
Because I can't change the theme with the code at style.
And how to change the datetime style make it more lagre size?
when vue build, Uploading dist to the server,click datetime, TypeError:
I installed the packages required but not able to locate the css file in the dist file in vue-datetime module in node_modules.
There is not dist file found when installing the package.
I have tried all the possible ways suggested but could not get the datepicker popup to show up.
CSS is breaking.
Docs are not relevant to the updated version using luxon.
TypeError: Cannot read property 'weekdaysMin' of null
Hello everyone, there is a problem with zone property in IE 11, in Chrome works good. If zone is "America/New_York", for example, input is always "Invalid Date". If 'local', 'UTC+3' works fine. Any suggestions?
<datetime
type="datetime"
input-class="form-control"
:value="value"
:value-zone="valueZone"
:zone="zone"
@input="handleDateInput"
Set min for show only future dates and max to show only past dates according to min and max
Hi,
First, thanks for your component !
It would be nice if there was a way to introduce some stepping for the list of minutes (for example every 5 or 15 minutes).
Hi, I use vue-datetime
and moment
in my project, and I change the attribute locale
of the datetime component to value zh-cn
, then it's ok when I run in npm run dev
. However, I pack all files by npm run build
and open the page, there is error like this when click the datetime DOM:
TypeError: Cannot read property 'weekdaysMin' of null
at Object.r [as weekdays] (index.js:formatted:13497)
at s.weekdays (index.js:formatted:13497)
at fs.get (index.js:formatted:13497)
at fs.evaluate (index.js:formatted:13497)
at s.weekdays (index.js:formatted:3642)
at s.render (index.js:formatted:13497)
at s.e._render (index.js:formatted:13497)
at s.r (index.js:formatted:3480)
at fs.get (index.js:formatted:13497)
at fs.run (index.js:formatted:13497)
Would you help to check what wrong? Thank you.
npm安装后通过import引入,然后一直报错组件无法引入,不知道什么原因
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.