hilongjw / vue-datepicker Goto Github PK
View Code? Open in Web Editor NEW[Deprecated] calendar and datepicker component with material design for Vue.js
Home Page: http://hilongjw.github.io/vue-datepicker/demo.html
License: MIT License
[Deprecated] calendar and datepicker component with material design for Vue.js
Home Page: http://hilongjw.github.io/vue-datepicker/demo.html
License: MIT License
It would be nice to support the remaining days of a week with the last and first days of the next and previous month. I looked at the source, and I'm not sure how I would implement it.
You probably want to update npm package shortly after fixes are done.
Thanks for attention.
How can I use the other format? Such as: 'MM/DD/YYYY', I tried to change it in the config but no luck.
Thanks
when i visit the demo page on phone(qqbrower/safari), I can see the cursor when the dialog show
this component does not support vuejs2.0
Can you add a branch to implement on vue2.0?
Out of the box, the input has the readonly attribute. I need a datepicker without that attribute, is there a way to do this?
In the DEMO given, none of them are readonly http://hilongjw.github.io/vue-datepicker/demo.html#!/
Thanks.
if (this.date.time === '') {
i've got an error when click on the input element
Uncaught TypeError: Cannot read property 'time' of undefined
and what i used is version 1.2.0
Hi, thanks for your work and i met this problem.
Error imge
Like the picture show, i can't control the timepicker show totally at once. At first time, it only show the left part of timepicker, then wait for little time you can see all the time picker. I read your code and cannot find the problem. Which i can't understand is this situation not showed at sure time. Did you met this problem also?
Can I show the datepicker as default? I rather show it as default than hide it.
It would be pretty nice to add some customisation to the input :
That would lead to better flexibility :)
I want to set color for dates or date range when initialize the calendar (ex: 1-1-2017 is red, 21-1-2017 is blue). Could you please guide me how to config or implement them ??
Nice Component.
While I being try to customize the style of the default <input/>
, using 'inputStyle' seem a little bit complicated.
A prop of setting 'class' of the <input/>
will be very handy for customize .
Will you accept a PR of it?
I chose the date, but I want to empty the input box, how can I do
Vue version: 1.0.28
If I'm using it as a child component, how can I grab the chosen date? I did
<date-picker v-on:change="setFromDueDate($event)" :time.sync="''" :option="datepicker.option"></date-picker>
But if I log the event, it appears as undefined
.
methods: {
setFromDueDate: function (event) {
console.log(event);
}
}
I see that inside the component it's using $emit
to trigger events, but shouldn't it be using $dispatch
instead, so that the parent can grab the event?
Hi. Thank you for the great date picker!
Sorry, I am a non-Chinese speaker. There is an issue with the limit on weekdays where you see the following month.
If I limit the weekday like:
{
type: 'weekday',
available: [1, 2, 3, 4, 5]
}
I get the correct result for the current month only.
Notice that this month is un selectable. In this example, we can see the start of September. This IS selectable and it shouldn't be.
I hope that make sense. If this is a different issue, let me know and I will move this to another issue.
Cheers - Love the datepicker - Thank you!!
I want to prevent the user from freely typing whatever he wants, so that only viable value of this input is the date he selected.
I don't see this option in the docs, and it would be very helpful.
Hello there,
Could you please tell me if this datepicker allow range/multi-selection? Or I'm just too dumb to find out the API? 😞
Thanks.
H.
The z-index for the datapicker is way too low, it appears behind most of my page elements.
I try month, year, min
I'm using this to display the D.O.B of a user and I'm getting the data from the database in 2016-08-22T12:39:29+0300
such a format. During the initial display, before interacting with the date picker, the date is displayed as above instead of 2016-08-22
(YYYY-MM-DD). This can be easily rectified by adding a coerce to the time
property
time: { type: String, required: true, coerce(val) { if (val) { return _moment(val).format('YYYY-MM-DD') } return
${val} }, }
I'll create a PR with this
Used with Vue 2.0, when multi-day select one day and unselect it
throw erro : this.selectedDays.$remove is not a function
in vue-datepicker.vue at
if (obj.checked === true) {
obj.checked = false;
this.selectedDays.$remove(ctime);
}
I think because in Vue 2.0 The $remove() method has been deleted
I do't know why the demo is work fine.
finally I modify the code to
if (obj.checked === true) {
obj.checked = false;
// this.selectedDays.$remove(ctime);
this.selectedDays.splice(this.selectedDays.indexOf(ctime), 1)
}
it work fine
In CSS styles within ".cov-date-body" rule are 2 parameters "position": first for "relative" and second for "fixed". So, only second is applied and first needed to be removed.
I have a demand: a startTime && a endTime ,when startTime picked the endTime should not > the startTime, off course if endTime picked the startTime should not < the endTime , How Should I do?.....when I declare @change function to return false the value in the input also changed....
how about change $emit('change') to $dispatch('change')
Hi, I just downloaded the component and it works great, however I have some things to say :
The minutes should be between 00 and 59 instead of being between 01 and 60 :It cause to have an invalid date with moment if you set the minutes to 60
I would also suggest strongly to do the same for the hours : hours are from 00 to 23, so it doesn't cause confusion and we are getting closer to ISO 8601 https://en.wikipedia.org/wiki/ISO_8601
Thanks !
This is a great package. Hope you have the option date range picker. Thanks
It would be nice to have easy custom color on the component.
The problem I see at the moment is that you are using !important flags in your css that can't be overriden.
Either you can find a way to remove them, OR we can pass props to the component for the colors.
我的项目本来js文件打包后只有2MB多,引入本插件后就变成4.5MB了,在node_module文件里查看,发现项目本身不大,但是引入的lodash库文件却大的吓人:2MB,我去lodash官方看了,其实下载lodash也就22kb,但不知为何到了npm中就变得如此巨大了,望优化一下,非常喜欢这个插件。
i want to change seconds ,how can i do this?
How can I set only the time?
Your .es6.vue is not really a es6-like code.
And there are also babel compiled lines in it .
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _moment = require('moment');
var _moment2 = _interopRequireDefault(_moment);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Perhaps your pushed the wrong file ?
Hi,
I use vuejs ^1.0.16.
My error:
Link capture image: http://i.imgur.com/ffKGi0U.jpg
Hi,
Thanks for your work, It is awesome.
One request, can there be better design for mobile, currently it takes whole width in the mobile and you can not see anything else on the screen once this is open, like this:
On desktop also it comes in the center of the screen, should be just coming below the date field.
Hi,
Using Vue2 I have this:
option: {
type: 'multi-day',
week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
format: 'DD/MM/YYYY',
placeholder: 'Due from...',
buttons: {
ok: 'Ok',
cancel: 'Cancel'
}
}
When I select the date, I can select 2 dates with no problem BUT the format is ignored and after the initial selection, if I select the date box again I get an Invalid Date message where the year / month should be. Clicking the arrow takes me to the correct month but if I try and select a different range, it adds the dates to the array and doesn't clear the existing ones.
When a month starts on a Sunday (May 2016, January 2017, October 2017), the days are offset by one, and start on Monday instead.
How can I emit an event to close datepicker when escape key is pressed?
配置如下:
limit: [{
type: 'weekday',
available: [1, 2, 3, 4, 5]
}, {
type: 'fromto',
from: '2016-05-15'
}]
我默认不填to
就是允许>= from
的时间,有以下问题:
将to
设置为2017-05-15
后,只有当月是正确的,其他月份比如4月、6月的日期可点
Would be nice to have the option to select the time in a 12 hour format with AM/PM
I need set year and month ,but the not set only it ,may can add type 'month' to set the month and year
I don't think you should have default styles for the input element in the component. It's great that we are able to override the styles with the component config (and you already have the styles in the documentation). But when I'm using the component with any other library the date fields will look different which is definitely not what I want.
If you want, I can create a pull request.
例如选中5月的31号,选择下一月,在选择返回上一月,这时5月选中的时间变为了30号。
在大月向小月切换后再切换回来时就会出现。
want add a icon after the datapicker ,and tap the icon like focus the datepicker
If you use the date format DD.MM.YYYY the calendar view won't mark the right day if you select a day greater than 12. Instead it will mark the month as day. Looks like the calendar marker is wrongly related somehow to month.
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.