t1m0n / air-datepicker Goto Github PK
View Code? Open in Web Editor NEWLightweight, dependency-free JavaScript datepicker.
Home Page: https://air-datepicker.com
License: MIT License
Lightweight, dependency-free JavaScript datepicker.
Home Page: https://air-datepicker.com
License: MIT License
hi guys,
i found the altFieldDateFormat does not work for 24 hour mode when my timeFormat has "aa" or "AA"
follwoing is my configuration:-
$('#expiryDatepicker').datepicker({
language: 'en',
dateFormat: 'dd-mm-yyyy',
altField: '#expiryDatetime',
altFieldDateFormat: 'yyyy-mm-dd hh:ii:00',
timepicker:true,
timeFormat: 'hh:ii AA',
onSelect: function (formattedDate, date, inst) {
var startDatepicker = $('#startDatepicker').datepicker().data('datepicker');
startDatepicker.update('maxDate',inst.date);
}
})
thanks for advance!! thanks for Author created such awesome plugin. :)
Пытаюсь подключить плагин в WordPress.
Получаю ошибку: https://monosnap.com/file/DeLrGSRFkZ0824XtLFGeqlwXqYM51h
datepicker.min.js?ver=4.4.2:1
Uncaught TypeError: $ is not a function
Обычно такие ошибки бывают в WP если jQuery плагин загружается до загрузки самого jQuery.
Но я знаю об этом и в WP есть логика последовательности. Она учтена и плагин точно подгружается после jQuery https://monosnap.com/file/qzQr3tIbytuODwLpo7VVrhF4VkOYSN
Пробовал активировать логику через ручной режим без класса в режиме noConflict https://api.jquery.com/jquery.noconflict/
`jQuery(document).ready(function($) {
$('.datepicker-air').datepicker();
});`
Бесполезно.
Может быть будут идеи что не так?
{Range: true} should return an array of date objects. Currently returns only one. I guess this is a bug.
Setting "multipleDates" to true brakes the UI when selecting a range.
It would be cool if this datepicker also could highlight days like this one. http://eternicode.github.io/bootstrap-datepicker/
E.g. you might want to hightlight weekends, sundays or just specific holidays.
There is an example with some events http://t1m0n.name/air-datepicker/docs/#sub-section-9 .. but I think it would be great with this options too which add a class, so you can style these days with a specific background color. I think it will work pretty much like "disabledDays", but just adding a class to the cells.
Okay, just noticed the "weekends" option. Anyway I think you might to highlight other days like easter and christmas. You can then use it in combination with diabled days.. e.g. store might have closed some of these days, but maybe also open some other days ... you could e.g. hightlight the period from 24th dec. to 1st january and you also want diable selection some of these days.
Hy!
Thx for great plugin!
I need a little help.
Need to dissable multiple specific dates,
Eg.: 2016/03/15, 2016/06/26...
Not days in all month, as we see in demo.
Can you help me please? thank you!
Timofey,
PS. IE 11
I feel it's a shame you used jQuery for an IE10+ plugin today. (I do not include it anymore in my projects)
Is there any particular pb you encountered that jQuery helped you solve or did you use it out of habit?
For ref. http://youmightnotneedjquery.com/
Sorry if I sound rude, I'm mostly curious.
Looks awesome and well documented with a nice API.
When changing date in input it should update the date in calendar, e.g. like this example here: http://eternicode.github.io/bootstrap-datepicker/
From the examples, the range of dates is done within one input. Here I would like to have two inputs of range date-piacker. For example; when I already selected a check-in date, it will automatically force me to select a check-out date.
Thanks
Hakeem
Здравствуйте Тимофей!
Большое спасибо за плагин. Есть пара вопросов.
It would be cool if we could limit the amount of dates the user is able to select when using range. This limit would disable the dates that exceed the limit after the first date has been selected.
Due the global Datepicker variable, i have a trouble with Require.js optimizer (r.js). Please remove it (global var). U can scope all variables into the closure.
If an input
element has it's onchange
event watched by some JS, this onchange
event will not get triggered when a date in the datepicker is selected.
$('input').on('change', function() {
// If a date is picked from the datepicker and not manually put in, then this event will not fire.
console.log('Input value changed.');
});
This is likely linked with this issue:
http://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-jquery
"Uncaught TypeError: this.date.getTime is not a function"
у меня появляются токово ошибка, если я добавляю старт дате на датепиккер , на документация написано что датепиккер подерживает старт дате а протика покажет набарот
I'm trying to integrate the datepicker into my app where user can select the dates within a range , but their are situations when user just need to check the data for one day only .
When i'm trying to select the same date again the text gets cleared up .
Is their any work around
Hello,first thanks for your great job.When I use it,I find an issue on it.
First I init the datepicker:
$('.datepicker-shipping').datepicker({ language:'zh' });
then I append a 'input' in html:
$('<input>',{class:'datepicker-shipping'}).appendTo('body');
But it doesn't work.
Expect your reply,thanks.
How about to manipulate only one DOM element (datepicker) and rerender it on each input field, instead of creating new datepicker on each input field?
Я хочу сам поменять дизайн календаря, но не хочу лезть в файл datepicker.min.css т.к. я его подключаю бауэром и не хочется лезть в него. Так же у меня несколько различных визуально календарей.
Если бы была возможность добавить класс к обертке календаря, то это было бы круто и помогло бы мне его изменить.
Хотя может я где-то не заметил в доках, и все-таки есть такая возможность.
Tested in iOS Safari and Chrome on iPhone 5s and iPad Pro 9.7. iOS 9.3.1.
How it happens: https://youtu.be/u0HxpB_wR8E?t=15
Tested on Android - no blinks.
nothing of that is mentioned in the README, nor the demo page.. I don't want to waste time implementing this on my website then finding out it's not working well on mobiles...would be wiser to find out such things in advance.
Thanks!
monthsField
parameter is actually monthsFiled
in the code.
I really love this datepicker and it is working perfectly. I am using the selectDate method, which is great, but I miss a selectRange method. This would really help me getting my project just fine.
Thanks for sharing this awesome datepicker! 👍
I think it would be great to add an option to enable "Calendar weekdays" as first "column" like this one here: http://eternicode.github.io/bootstrap-datepicker/ but by default it should be disabled.
Seems no way to get latest version via bower install
.
hello , Please tell me how to use get
and set
in IE8 ~ Thank you very much
code in datepicker.js start line 912
modern browsers
.Please change dependencies in bower.json from:
"dependencies": { "jquery": "~2.1.4" }
to
"dependencies": { "jquery": "~2.2.1" }
It would be cool if could choose the time too. How about that?
Hi!
It's plugin not work in colorbox.
I am using your datepicker in an app, which is also running on iOS. My problem is, that my picker (range=true) is not using range all the time. Sometimes you can select single dates, which results in enddate 14.03. and startdate 02.03. which is not possible in reality. Is there a possibility to handle this behaviour?
Добрый день, спасибо за очень милый DatePicker. Возможно ли сделать так, чтобы можно было выбирать между одной датой и диапазоном дат? То есть, например, добавить checkbox "Показать диапазон дат", открывающий ещё один выбор месяца?
Opening a datepicker field with dates already filled in does not pre-select the dates in the dropodown
Now I set the as datepicker trigger.
The < input > is in a scrollable < div > , when I am scrolling the div,the datepicker will stay there , not following.
<div style="height:200px;overflow-y:auto;">
<input class="datepicker-here">
</div>
@t1m0n
Please add feature for placement calendar into other some element.
<script>
$('.datepicker-here').datepicker({
target: '.some-container'
});
</script>
<input type="text" class="datepicker-here" />
....
some content
<div class="some-container"></div>
Remove all listeners etc.. Quite useful when working with single page apps. Thanks
Hey!
It does not work when I use it in a Modal..
I have tried for several hours now, and get the following error:
"Uncaught TypeError: Datepicker.Body is not a function" @ line 158
( this.views[this.currentView] = new Datepicker.Body(this, this.currentView, this.opts); )...
Is there anyone who knows how to solve the problem?
How about hotkeys to select a single date, multiple dates or a date range.
simple click -> select the clicked date
click + shift-click -> select date range
click + cmd/alt click -> select multiple dates
I currently built buttons around your datepicker to change the behaviour between selecting a single date or a date-range. Its ok. But hotkeys would be a nice feature. :)
Hi Timofey, I want to use my own styles for selection, focus, range-from and range-end and also. I read your documentation, which is clear for almost everything, but didn't say anything about using personal them. I'm wondering should do something like jQuery addClass() in my js file or create my own datepicker.css to replace yours? I know both will work, but considering the future maintenance, which way is better? I appreciate so much for your knowledge!
hi t1m0n, thanks for this work!
But in my case (i’m using the german localization) there’s a problem with special characters like “ä” - the german month march (März) is displayed as “Märärz”. Is there any solution where to fix?
Datepickers-container div produced two extra page on print.
Such interface elements should not be invisible on printed media.
Hi,
Any compatibility polyfill for IE9 ?
Привет! Отличный плагин, но есть одна небольшая проблема, которую я не могу решить: у меня включена опция {range: true}
, есть дата начала диапазона и длительность диапазона. Можно ли каким-нибудь образом после инициализации плагина установить новые даты и новый диапазон?
Я думал сделать это в коллбеке onSelect: function (formattedDate, date, inst) { ... }
, но в итоге сваливаюсь в беконечный цикл по вполне очевидным причинам (Uncaught RangeError: Maximum call stack size exceeded)
is it possible to make it multiple months for range? it would be good if you could set it 2 moths to view so range selection would make more sense. In jquery ui option is available via "numberOfMonths" parameter. Awesome datepicker! Thanks.
Great Datepicker!
I installed it through Rails Assets and everything works fine, except it cannot find any localizations and therefore the calendar is in Russian.
Can't find language "en" in Datepicker.language, will use "ru" instead
Did I miss something?
How can i hide the calendar control after selection of a particular date
Hi, this is a pretty cool datepicker. My only issue is that I want to use dragging action to select date range. I spent some time studying you functions but I got no idea about where to start. Could you please give me some heads-up about where to begin? I'm pretty a green hand on developing. Would appreciate of any kinds of help.
Было бы здорово добавить лицензионное соглашение.
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.