mariomka / vue-datetime Goto Github PK

Is it possible to use only as Time Picker?

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

Versions

• vue: 2.5.2
• vue-datetime: 1.0.0-beta-3
• luxon: 0.5.6

Description:

Steps To Reproduce:

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.

Hi @mariomka
Selected time does not match with the data model. It shows the server time. Same happens in the provided demo.

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,

When using minDate and maxDate with minutes, you still can select minutes and hours in time picker out of range

I think this module is perfect, but looks like needs some other things

the opposite of disabled-dates

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.

Versions

• vue: 2.3
• vue-datetime: 1.0.0-alpha.6

Description:

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

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

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

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

I am using bootstrap 4 and during the opening transition the popup is behind the bootstrap elements from a different row (see screenshot). After the transition the popup is above the elements. Tested in firefox and chrome.

Currently the time selection is in 24 hour format. How can I change that to 12 hour?

when vue build, Uploading dist to the server,click datetime, TypeError:

1. Cannot read property 'weekdaysMin' of null
2. Cannot read property 'getElementsByClassName' of undefined
3. Cannot read property 'clientHeight' of undefined

Versions

• vue:
• vue-datetime:
• luxon:

Description:

Steps To Reproduce:

Including a reproduction would be great. You can fork this fiddle: https://jsfiddle.net/ofc30uv3/

Versions

• vue: 2.5.11
• vue-datetime: 1.0.0-beta.3
• luxon: 0.5.8

Description:

How to add onchange listener on the field for validation?

Versions

• vue: 2.5.13
• vue-datetime: 0.7.1
• luxon: 0.3.1

Description:

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.

Steps To Reproduce:

Use vue-cli with webpack.
Add de component
<datetime ... moment-locale="es" ...>
npm run dev --> works
npm run build, serve -s dist, --> null exception

Set min for show only future dates and max to show only past dates according to min and max

Versions

• vue: 2.5.13
• vue-datetime: 1.0.0-beta.3
• luxon: 0.4.0

Description:

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.

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

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.

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.

Versions

• vue: 2.5.13
• vue-datetime: 1.0.0-beta2
• luxon: 0.4.0

Description:

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.

TypeError: Cannot read property 'weekdaysMin' of null

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

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

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.

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

npm安装后通过import引入，然后一直报错组件无法引入，不知道什么原因

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?

Hey mate.

I've discovered one issue. Currently my time is 22:09, I just can select a time greater or equals than 22:10. Dunno if this is lack of my configuration or something, but I don't think so.

Versions

• vue: 2.5.16
• vue-datetime: 1.0.0-beta.3
• luxon: 1.0.0

Description:

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)

vue-datetime.js:718:

function plugin (Vue) {
  Vue.component('datetime', Datetime);
}

I use Symfony 4, webpack and yarn.
And built it by command

yarn run encore dev

app.js

import Vue from 'vue'
import Datetime from 'vue-datetime'
import 'vue-datetime/dist/vue-datetime.css'

(function () {
    new Vue({
        el: '#app',
        components: {
            datetime: Datetime
        }
    });
})();

webpack.config.js

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();

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.

Versions

• vue: 2.5.2
• vue-datetime: 1.0.0-beta.3
• luxon: 1.2.0

Description:

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.

Steps To Reproduce:

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.

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

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.

Hi there!

Versions

• vue: 2.5.11
• vue-datetime: v1.0.0-alpha.6
• luxon: 0.3.1

Description:

Computed property inputValue not equals value prop. It is properly behavior ?

Steps To Reproduce:

https://monosnap.com/file/USxloM0JiJTe9PyOJqtSVyHIfrUOLU

Code:

https://gist.github.com/zmts/4d4cb7ddb6c7107faeb84256b0c951c3

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?

Sorry for this dumb question but how do i download the script files for using it in the <script> tag?

Versions

• vue: 2.5.13
• vue-datetime: 1.0.0-beta.3
• luxon: 0.3.1

Description:

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.

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"

Hello,

Versions

• vue: 2.5.13
• vue-datetime: 1.0.0-beta.2
• luxon: 0.3.1

Description:

with :minute-step="15" minute "00" cannot be selected

Steps To Reproduce:

open complete demo on https://mariomka.github.io/vue-datetime/
tried on current firefox and chrome

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

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"

Versions

• vue: 2.5.16
• vue-datetime: 1.0.0-beta.3
• luxon: 0.5.8

How to set the language to Chinese?

Settings. DefaultLocale = "zh - cn"

The mobile browser doesn't work.

I would like to be able to change the datepicker type dinamically.
Is it posible to add that feature?