Date range picker. Uses Shadow DOM, lightweight size, no dependencies.
Home Page: https://easepick.com
License: Other
Licensed under the terms of GNU General Public License Version 2 or later.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Hi guys,
First of all thanks for your great work, this is awesome package π― π― . I think it would be great if you add a feature that allows you to select only the time picker instead of the date, it will help a lot of people ( including me of course π).
Looking forward to your response .
Thanks & Regards,
Duy.
Describe the bug
When using range plugin and changing day cell height, the date range pseudo arrows don't adjust it's top position.
To Reproduce
Steps to reproduce the behavior:
RangePlugin--day-height: 25px;Expected behavior
Range arrows should center align itself dynamically even if cell height is changed.
Additional context
When completely removing the top parameter from pseudo element arrows it seems to adjust just fine. Is this parameter even necessary?
.container.range-plugin .calendar>.days-grid>.day.start:after {
border: 8px solid transparent;
border-left: 8px solid var(--primary-color);
content: "";
pointer-events: none;
position: absolute;
right: -14px;
/* top: 11px; <-- disabled this style */
z-index: 1;
}Describe the bug
In the polish language, months' names should be in another inflection if we use it with days. For eg. '13 lipca', not '13 lipiec' like the plugin provides.
Date class toLocaleString method handles that properly if we use option dateStyle set to long. The plugin composes full date string using day, month and year separately. Month name generated by toLocaleString but with option month set to long in longMonths method of DateTime module does not fit to be month part in full date with day.
Code example
new Date(2022, 06).toLocaleString('pl-PL', {dateStyle: 'long'})
result: '1 lipca 2022'
new Date(2022, 06).toLocaleString('pl-PL', {month: 'long'})
result: lipiec
Hi. i have two question
-easepick support for vue.js 3 ?
Describe the bug
I'm trying to use the library in a stenciljs project, I installed the bundle of npm but when I create a new instance this throw an error
To Reproduce
Steps to reproduce the behavior:
Aditional context: Im also working this on storybook
Describe the bug
I have found that the DateTime module does not return today's date with toISOString().
I also notice that it does not get the hours and minutes.
To Reproduce
Expected behavior
Code Playground
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
</head>
<body>
<script>
const DateTime = easepick.DateTime;
const today01 = new DateTime();
const today02 = new Date()
console.log(today01.toISOString()) // "2022-08-07T22:00:00.000Z" β
console.log(today01.toJSDate().toISOString()) // "2022-08-07T22:00:00.000Z" β
console.log(today01.format("YYYY-MM-DD HH:mm:ssZ")) // "2022-08-08 00:00:00Z" β
console.log(today02.toISOString()) // "2022-08-08T12:42:41.505Z" β
</script>
</body>
</html>Describe the bug
When the input is positioned close to the bottom of the screen, the picker opens off-screen.
To Reproduce
Steps to reproduce the behavior:
height: 700px; to any element above the input to force it down the page
Expected behavior
The picker should be positioned above the input if there is not enough room below.
Additional context
This issue was referenced in #30 and looks to have been fixed in 1.1.4 but the problem still occurs.
Describe the bug
The focus is trapped into the datepicker input box.
To Reproduce
Steps to reproduce the behavior:
Configurator heading to set the focus on itExpected behavior
Once the date is picked, the focus should go to the next focusable element or should pass through ahead naturally.
Code Playground
https://easepick.com/configurator
Using the method referenced here: #3 and on the example:
https://jsfiddle.net/waki/104p2uhL/
The selected date range is not highlighted as expected.
Describe the bug
When use lock-plugin (with max date = today) + preset-plugin button "this month" is disabled.
Expected behavior
If there is a limit (max date) - button "this month" must select from 1st day of this month to max date (today)
Screenshot
Describe the bug
Couple of issues here, found at the same time.
"startDate" and and "endDate" RangePlugin options do not seem to have the same flexibility as "setStartDate" and "setStartTime", and I was unable to get them to work because it complains that ".clone" is not a valid method, even if I put new Date(...) instead of string, or a numeric timestamp generated with Math.floor(new Date().getTime()/1000)
RangePlugin does not accept value for time (hours/minutes/seconds/millis) when provided via the methods setStartDate and setStartTime, making it impossible to set a default for the TimePlugin
TimePlugin has no way to set starting values, so if I wanted the default to be 0:0:00 (midnight) to 23:59:59 no way to do this.
Using format: option with H:m:s made the resulting input time string all screwy, as the TimePlugin just sticks its time value right before the date no matter what.
You can't stick a value inside the input tag and have it automatically populate the range and time values when the picker is created.
Usability with auto-apply and TimePlugin: When picking a date that is the same date for the range, it closes the window before you can select the time. Ie "March 21 2022 - March 21 2022" ... There is no way to create a "close button" so you have no way not to "auto apply" your changes except using "Apply" "Cancel". and other is no easy way to change the text of these buttons, ie "Check" "X"
I need a way to set the divider / seperator. Other datepickers use ~ .. it would be nice to change it from '-' to '~'
To Reproduce
this.created_picker = new easepick.create({
element: document.getElementById('manager-search-date-created'),
plugins: ['RangePlugin', 'TimePlugin'],
RangePlugin: {
tooltipNumber(num) {
return num - 1;
},
locale: {
one: 'day',
other: 'days',
},
startDate: new Date(),
endDate: 'March 23, 1:35pm'
},
TimePlugin: {
seconds: true,
append: 'start',
stepMinutes: 1,
stepSeconds: 1
},
css: [
'app/js/lib/easepick/easepick.css',
],
});Expected behavior
There was no way I could use these options. I was forced to use methods setStartDate and setEndDate
I had created specific strings and used new Date(...) but it didn't take into account the time values, even though the time plugin was activated.
I need a way to set the start Hour/ Minute/Second on the "End time"
This needs some refactoring. I cannot figure out how to get the date/time format to change when using the TimePlugin. Setting the "format:" option to "MMMM DD YYYYY HH:mm:ss" for example (matching a default Javascript date format) caused it to display as 0:00 March 22 2022 0:00:00 - 0:07 March 22 2022 07:55:22
This seemed like a no-brainer, but I was surprised it didn't work. I tried generating the string but it didn't just work magically, so I've had to dig into these other features. It would have been easiest if I could have just provided it with a value and had it populate. Normally when you are dealing with a date picker, you have some way of accurately setting the date, and its usually just by a string -- because you've retrieved that data from a database, most likely
& 7) Very confusing. Not enough features to customize the text or buttons.
I picked this plugin over "daterangepicker" and "tempus-dominus" because it displayed correctly out of the box in a WinBoxjs (https://github.com/h3rb/winbox) window. I'd love it if it had some more features that made using it easier/possible. As it stands now the functionality for picking date ranges with time is a bit crippled.
Addendum
Using moment.js, you can generate the values I was testing with this way:
var defaultDateTime = '00:00 '+now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate()+' - 23:59 '+now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate();
var startTime = moment(0,"HH").format('MMMM D, YYYY H:mm:ss');
var endTime = moment().add(1,"days").format('MMMM D, YYYY H:mm:ss'); // not supported by easepick :( moment({hour: 23, minute: 59, seconds: 59}).endOf('data').format('MMMM D, YYYY H:mm:ss');I'm using webpack to generate my stuff. When using the DateRangePicker I get the following error: "LockPlugin: options minDays, maxDays, selectForward, selectBackward required RangePlugin."
The error comes from LockPlugin
When using webpack, this.picker.options.plugins is not an array of strings.
import { create, AmpPlugin, RangePlugin, LockPlugin } from '@easepick/bundle';
const rangepicker = create({
element: '#picker',
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
],
AmpPlugin: {
darkMode: false
},
RangePlugin: {
startDate: new Date('2022-08-19'),
endDate: new Date('2022-09-19'),
},
LockPlugin: {
minDate: "2022-07-21T00:00:00.000Z",
minDays: 3,
maxDays: 999
},
plugins: [AmpPlugin, RangePlugin, LockPlugin],
})
Hi
How can I change the tooltip background-color?
Thank you
Enabling TimePlugin as well RangePlugin with repick: true steals focus while trying to select a time. This is true for the custom mode of TimePlugin as well as with native: true in browsers that support a more interactive native time input element.
Hi!
How can I show "offset" days like every calendar?
Thank you for help!
Describe the bug
When a time is changed, the apply button stays disabled.
To Reproduce
<html>
<head>
<meta charset="utf-8" />
<title>easepick</title>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
],
autoApply: false,
plugins: ['TimePlugin'],
TimePlugin: {
format: 'HH:mm',
},
});
picker.setDate('2022-01-01');
picker.setTime('15:00');
</script>
</body>
</html>
Change time in a browser to 16:00. You will see that the apply button is still disabled.
Expected behavior
Not a disabled apply button after a valid change
Describe the bug
When I try to use the demo datepicker in the documentation site with a keyboard, I can tab to the "previous month" and "next month" links but I cannot perform any other tasks. In particular, I cannot actually select dates.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect to be able to tab into the datepicker as a whole and select dates with the keyboard.
Code Playground
n/a
Additional context
This is a showstopper issue for accessibility compliance.
Hi,
Can you explain why this package is only supported in Safari 14.1 and above?
Does it not work on older versions, or is it flex-gap or some css element that's missed in older versions?
Thanks for your great work!
Hi π
I'm currently using this plugin in one of my projects as I really like the UI and general theme. I'm using a combination of plugins, in particular the Range and Time plugin, both of which have several issues floating around on Github with little to no support.
In addition, the last active change on this project was many months ago.
Is this project still being maintained?
https://jsfiddle.net/q4ae8d0v/3/
When I change the default format, all but the current date incorrectly become disabled/locked. When I remove the format, the issue resolves. Interestingly, when I remove the maxDate from the LockPlugin, this also solved the issue.
What's really throwing me is that when I use the configurator to produce the desired output, it works exactly as expected.
Describe the bug
The first time the date picker is open it is misplaced, after the first time it is positioned correctly.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The date picker should show in a consistent position.
Code Playground
https://easepick.com/configurator
Describe the bug
This may or may not be a bug, but it'd be great to understand a workaround. I've got a unique use-case, where I need dates highlighted depending on a status returned from an API.
using the picker.on("view") event, I'm looping through all of the present dates, making the necessary API call and applying a css class to add a background colour to said date depending on said status.
However, if I click anywhere within the page, the picker.on("view") event is triggered again. Is this intentional? The API requests need to be made on first load and on month change.
To Reproduce
Steps to reproduce the behavior:
picker.on("view") event and do a console.logExpected behavior
The view event makes it sound like it's triggered when the calendar is viewed
Code Playground
Additional context
As I mentioned before, it may or may not be a bug, or I may be trying to apply the use-case incorrectly, but it'd be great if anyone could point me in the right direction.
I'm having a hard time figuring out how to host this myself. I've downloaded the assets and load them accordingly (css in the head and js in the body end), but I cant seem to get rid of having to pass css through the initialization step ... how do I do that?
How do I load assets in a normal way without having to load css through the init step β it seems like an odd decision architecture wise.
Describe the bug
I have an issue in Angular 13 with optimization: true. If I set optimization: false, it's working. but... I don't know what happen because I'm calling library as it says in the documentation with budle
import { easepick } from '@easepick/bundle'
...
this.datePicker = new easepick.create(datePickConfig)
Error:
In this part of the constructor
const C = class extends Date {
constructor(i=null, e="YYYY-MM-DD", n="en-US") {
v(this, "lang"),
super(C.parseDateTime(i, e, n)),
this.lang = n
}
static parseDateTime(i, e="YYYY-MM-DD", n="en-US") {
if (!i)
return new Date((new Date).setHours(0, 0, 0, 0));
if (i instanceof C)
return i.toJSDate();
if (i instanceof Date)
return i;
if (/^-?\d{10,}$/.test(String(i)))
return new Date(Number(i));
if ("string" == typeof i) {
const r = [];
let c = null;
for (; null != (c = C.regex.exec(e)); )
"\\" !== c[1] && r.push(c);
if (r.length) {
const l = {
My angular.json
"configurations": {
"local": {
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"hidden": true,
"scripts": true,
"styles": true
},
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
Is there an option to quickly change the year?
Describe the bug
When using the KbdPlugin, and the calendar is hidden, the days continue taking up tab stops. So if the initiating element is part of a larger form, trying to tab to the next input gets quite cumbersome.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
When the calendar is hidden it should set tabIndex to -1 for all calendar units so that it will not interfere with the tab order on the rest of the page.
Code Playground
Demo: https://d1ruuc.csb.app
Code: https://codesandbox.io/s/magical-snyder-d1ruuc?file=/index.html
Additional context
I fixed this in my own implementation by handling the view event and updating the tabIndex, but I figured maybe you want to include this functionality in the library itself. Please let me know if I'm just not using it the right way!
My fix:
picker = new easepick.create({
element: document.getElementById("datepicker"),
css: ["https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css"],
plugins: [KbdPlugin],
setup(picker) {
picker.on("view", (e: CustomEvent) => {
const { view, target } = e.detail;
if (target && "querySelector" in target) {
if (
view === "CalendarDay" &&
!["locked", "not-available"].some((x) => target.classList.contains(x))
) {
// ==> Set tabIndex based on picker.isShown()
target.tabIndex = picker.isShown() ? 2 : -1;
} else {
const elems = target.querySelectorAll(".unit:not(.day)");
// ==> Set tabIndex based on picker.isShown()
[...elems].forEach(
(el: HTMLElement) => (el.tabIndex = picker.isShown() ? 1 : -1)
);
}
}
});
},
});Describe the bug
In Angular v12+, it's throwing Must call super constructor in derived class before accessing 'this' or returning from derived constructor error.
new easepick.create({
element: this.document.getElementById('foo') as HTMLInputElement,
css: [
'https://cdn.jsdelivr.net/npm/@easepick/core/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/range-plugin/dist/index.css',
],
})
To Reproduce
Steps to reproduce the behavior:
fooExpected behavior
Turns out, in the source code, this ; (separating the super method and this.lang assignment) turns into , at build times.
Code Playground
N/A.
Additional context
Angular v12
Describe the bug
When someone clicks on the datefield, easepick starts on the date that's filled in. When clicked outside easepick so its closes and clicked on the input again the view renders on today
To Reproduce
Steps to reproduce the behavior:
Expected behavior
On step 3 i would expect it starts at 2022-01-01 because thats the value
Code Playground
<html>
<head>
<meta charset="utf-8" />
<title>easepick</title>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
</head>
<body>
<input id="datepicker" value="2022-01-01" />
<script>
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
],
autoApply: false,
});
</script>
</body>
</html>
Today is 30th on Jan. I am on easepick.com using Mobile view (iPhone 12)
When I click 'next month' I get March (should be February).
This behavior doesn't happen on desktop view (Maybe because I see two calendars instead of one?)
I did many clicks and jumping over one month seems to have some random behavior. Couldn't notice notice any repetition.
If you click back and next - it doesn't jump over one month anymore. E.g. Jan > Mar < Feb < Jan > Feb
Tested in Chrome and FF
Can somebody confirm this?
Describe the bug
When showing multiple calendars, the AMP-plugin dropdown always configures the first calendar instead of the calendar you are editing.
To Reproduce
Expected behavior
I expect the first calendar to show the month of April, and the second calendar to show the month of May.
Actual behavior
The first calendar now shows the month of May and the second calendar shows June.
Code Playground
https://jsfiddle.net/txs5bc36/
Arrow overlaps tooltip
Creating a custom preset of for example the last hour, PresetPlugin only sets the date but not the time components when selected.
If a user selects a date range when using autoApply: false, if the user wants to change just the start or end time but not the date, the apply button is still disabled
To reproduce, select a date range, Apply, then try to change one of the time fields.
Ugh.. horrible title. Sorry about that, let me explain.
The calendar shows disabled days as this:
Is there any way to have the start of a locked range look like "half locked," sort of how this is:
See how the beginning and end of a locked range is slanted? Maybe have lockedStart, locked, and lockedEnd css classes?
If you can get this done by tomorrow, I'll give you $100USD (paypal / venmo).
You have no idea how bad I need this lol My deadline is tomorrow
I have fallen in love with easypick! It's EXACTLY what I need! Thank you (x100) for creating this!
Hi,
I am trying to use the easepick into my component using VUE3, but when change de css (param) to de autoimport, doesn't work for me, always need an external css url into config?
It's possible?
Originally posted by pallardino May 14, 2022
An other question for customising preset-plugin.
TypeError: this.options.customLabels.forEach is not a function. (In 'this.options.customLabels.forEach(((t,e)=>{this.options.customPreset[t]=s[e]}))', 'this.options.customLabels.forEach' is undefined)
Thanks in advance
Describe the bug
LockPlugin minDate and maxDate not working with ISO string
To Reproduce
Within configuration:
LockPlugin: {
minDate: '2022-04-01',
maxDate: '2022-09-01',
}
Expected behavior
minDate and maxDate applied as given
Additional context
Current behavior is that today is the upper limit on maxDate and the lowest limit on minDate. When i convert it to a Date object it works as expected:
LockPlugin: {
minDate: new Date('2022-04-01'),
maxDate: new Date('2022-09-01'),
}
Issue Screenshot
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The calendar should re-positioned towards the left so that the other months are visible and can be interacted with.
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Code Playground
Provide a link to code playground like https://jsfiddle.net, https://codepen.io, etc.
Additional context
Add any other context about the problem here.
Right now we have to listen the change event ourselves, I think the API would be a lot more obvious if the widget always globally dispatches either select, change or both when any value is changed in any configuration.
Related to that with autoApply: false it also looks like the apply button doesn't get enabled after changing just the time.
On a side note finding an example on how to properly listen to changed values was a bit difficult for me, so making that clearer is probably the biggest documentation improvement to make :)
If I understand that correctly, you can specify a target for picker.show() (example: document.querySelector('#date3')) but it doesn't focus on the field but is in the top left corner.
I have:
date start input field (display none)
date end input field (display none)
and date3 input field (custom value) <- click, open and focus picker (currently open in left top corner)
in the meantime i tried to switch the element back and forth but i don't know how to change options
I have some question in #76 please help.
Describe the bug
Repick option with range plugin does not work with inline. When inline is on, clicking the end input box does not behave as expected. It behaves as if the user is picking from the beginning. (ie. you have to click twice, choosing the start time again as well)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
For the end date to be set to the date picked, and the start date remain unchanged
All working fine after implementing the recommended way.
Describe the bug
Selecting 1970-01-01 via the datepicker will result in todays date.
Also, picking dates from [1970-01-02 - 1970-01-13) will result in invalid dates. Eg. Input 1970-01-12 wil result in date 119308-07-10
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Date 1970-01-01 is selected
Code Playground
This problem can be reproduced on easepick.com
Describe the bug
easepick is using the classname "container" without any prefix, which is a very common classname, and it's breaking the site.
To Reproduce
Use it on a site where the container classname conflicts
Describe the bug
I currently have a problem where I think it will only occur at the end of the month. currently we have the 31.08. if I now want to scroll to the next month, I end up at the x.10. instead of x.9.
To Reproduce
Describe the bug
When having more than 1 calendar window, and set up maxDate to past/present, picker populates with wrong options (future disabled month).
To Reproduce
Steps to reproduce the behavior:
{
calendars: 2,
plugins: [LockPlugin],
LockPlugin: {
maxDate: new DateTime()
}
}Expected behavior
Picker should initialize with correct (usable) options.
Additional context
I does fix itself when switching to past month - it's not possible to go back to the future.
I assume you do:
picker.on('click',function(e){...},...?)
What are the options? Can you provide an example
What I need to do is trigger something after "Apply" is clicked
I think the data-start and data-end Attributes (button) is wrong. This contains current date not the preset date.
Moreover, it does not harmonize with the TimePlugin. The times (hour, minute) are only used if "autoApply: true" is (the timePlugin is not updated at the moment)
("Feature request": Nice to have a select class for chosen the preselect.)
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google β€οΈ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.