Giter Site home page Giter Site logo

t1m0n / air-datepicker Goto Github PK

View Code? Open in Web Editor NEW
2.5K 66.0 1.4K 2.01 MB

Lightweight, dependency-free JavaScript datepicker.

Home Page: https://air-datepicker.com

License: MIT License

JavaScript 89.20% HTML 0.87% SCSS 9.82% EJS 0.10%
javascript calendar datepicker timepicker

air-datepicker's Introduction

Air Datepicker

Lightweight, dependency-free, fast, customizable datepicker written in pure JavaScript. Works in all modern browsers which supports native css variables.

air datepicker image

Install

npm i air-datepicker

Usage

import AirDatepicker from 'air-datepicker'
import 'air-datepicker/air-datepicker.css'

new AirDatepicker('#el' [, options]);

Demo and docs

Recent updates

v3.5.0

  • added fixedHeight option, allows you to have equal weeks number in every month
  • added method disableDate, allows you to disabled one or multiple dates with datepicker API
  • added prop disabledDates - it is a Set which holds all disabled dates
  • added possibility to pass {silent: true} to update and setCurrentView methods, #583
  • changed update method - now if you pass selectedDates then calendar will keep selected only those dates
  • fixed selecting time on same date when range: true, #568
  • fixed date conversion to local date when using strings, e.g selectDate('2024-03-05') #589
  • fixed localization generation, thanks to hreyeslo in #524
  • fixed type definition for clear method, thanks to ahmetzambak in #591
  • fixed German translation for "clear", thanks to pbek in #582
  • added Slovenian locale, thanks to carliblaz in #569
  • added Basque locale, thanks to ikerib in #529
  • added Norwegian locale, thanks to MortenSpjotvoll in #521

v3.4.0

  • added new options onFocus and onBeforeSelect grant you more control over range selection behaviour and more #526
  • added new method getViewDates() allows you to get all dates that should be currently displayed in calendar #536
  • toggleSelected now can be a function #534
  • fixed clear method #546
  • added Bulgarian locale, thanks to tonytomov, in #531
  • added Catalan locale, thanks to joatb, in #542
  • added Croatian Locale, thanks to diomed, in #551

v3.3.5

  • added handling of optional chaining operator in dist package #518
  • added Indonesian locale, thanks to BariqDharmawan, in #517

Version 3.0.0 highlights

It is been a while since the last release, a lot of work has been done, and I'm glad to finally present a new version of Air Datepicker.

The main goal was to remove jQuery dependency, and I'm happy to announce that Air Datepicker is no longer need any dependency, hurray! 🥳

Now it's written in ES6, uses native css variables for easy customization, and it's all built with webpack.

Soooo, here is the full list of changes:

  • no more jQuery
  • improve rendering process - remove redundant cell render when selecting date, which gave a large speed boost compared to the old version
  • date format tokens now use Unicode Technical Standard
  • TypeScript support
  • added selectedDates option, to be able to select dates from the start
  • added a possibility to create custom buttons
  • now one could change selected range by dragging dates
  • added container option which allows you to place datepicker in a custom element
  • navTitles can receive a function and could render dynamically
  • dateFormat now can receive a function
  • onSelect and onRenderCell callbacks are now receive a single object as an argument instead of multiple parameters
  • selectDate now receives second parameter with options
  • onChangeMonth, onChangeYear, onChangeDecades are replaced with single option onChangeViewDate
  • localization now must be provided as an object instead of string as it was before

Contribution

  • To run project run npm i, then npm run dev:serve.
  • If you want to report a bug, please provide steps and code to reproduce it or create a live example. You could use this template for creating sandbox
  • If you have a question please ask it on StackOverflow with tag air-datepicker
  • If you have a proposal or PR please submit it to the main branch - please follow code style according to .eslint configuration. Also make sure that your effort is aligned with project roadmap - my goal is to keep datepicker clean and lightweight (under 15kb) without overcomplications or narrowly focused features

Thank you! 😊

License

Air Datepicker is MIT licensed.

air-datepicker's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

air-datepicker's Issues

Localization not available

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?

About the css file

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!

Global Datepicker variable

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.

How to add the dragging function

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.

Установка диапазона определённой длины после клика на пикер

Привет! Отличный плагин, но есть одна небольшая проблема, которую я не могу решить: у меня включена опция {range: true}, есть дата начала диапазона и длительность диапазона. Можно ли каким-нибудь образом после инициализации плагина установить новые даты и новый диапазон?

Я думал сделать это в коллбеке onSelect: function (formattedDate, date, inst) { ... }, но в итоге сваливаюсь в беконечный цикл по вполне очевидным причинам (Uncaught RangeError: Maximum call stack size exceeded)

Feature Request: Hotkeys to select range, single date, multiple dates

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

Ошибка Uncaught TypeError: $ is not a function

Пытаюсь подключить плагин в 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();
     });`

Бесполезно.

Может быть будут идеи что не так?

Limit amount of dates in a range

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.

Add option to highlight days

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.

German localization

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?

Вывод второго блока выбора месяца

Добрый день, спасибо за очень милый DatePicker. Возможно ли сделать так, чтобы можно было выбирать между одной датой и диапазоном дат? То есть, например, добавить checkbox "Показать диапазон дат", открывающий ещё один выбор месяца?

Single DOM element datepicker

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?

readonly, placeholder issues

Timofey,

  1. Air-datapicker shows on "readonly" inputs.
2. "placeholder" produces strange behavior (requires multiple clicks to change empty or the same date). 3. Request: TODAY button on Click - populate current date (maybe after selecting it on datepicker as now) and close datepicker (if autoClose) 4. Request: auto (relative) datepicker position

PS. IE 11

mobile? responsiveness?

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!

Can we add multiple months?

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.

Значение при выборе диапазона дат.

Здравствуйте Тимофей!
Большое спасибо за плагин. Есть пара вопросов.

  1. Можно ли в качестве опции altField использовать span, p или div ?
  2. Если altfield не задан, а datepicker вешается на строчный или блочный элемент, как в этом случае получить результат выбора. Иными словами как присвоить переменной результат выбора, чтобы потом его оформить по своему и отобразить в нужном месте.
  3. если выбирается диапазон дат (range) или две даты (через multipleDates со значением 2), это получается одна строка (переменная), можно ли как-то результат присваивать двум переменным ? или только через парсинг строки ?

Clicking on a date in the datepicker does not trigger the JS change event

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

altFieldDateFormat time does not work for 24 hour mode

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

Disable custom dates

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!

jQuery dependency

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.

ошибка с старт дате

"Uncaught TypeError: this.date.getTime is not a function"
у меня появляются токово ошибка, если я добавляю старт дате на датепиккер , на документация написано что датепиккер подерживает старт дате а протика покажет набарот

how to use get and set in IE8

hello , Please tell me how to use get and set in IE8 ~ Thank you very much

code in datepicker.js start line 912

I'm so sorry , I just saw must use modern browsers.

Please make options for target placement calendar

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

Select a single date when {range: true}

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

How to make two inputs of range date-piacker.

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

Range on iPhone is not working

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.min.css т.к. я его подключаю бауэром и не хочется лезть в него. Так же у меня несколько различных визуально календарей.
Если бы была возможность добавить класс к обертке календаря, то это было бы круто и помогло бы мне его изменить.

Хотя может я где-то не заметил в доках, и все-таки есть такая возможность.

Issues in Modal

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?

datepicker view

Hey t1m0n!
Thanks for the great plugin.
How about adding additional view mode which would allow to display multiple months?
Just like jQuery datepicker does.
mm

It doesn't work before the DOM is created.

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.

selectRange method is missing

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.