onx2 / s-date-range-picker Goto Github PK

Since this main repo is officially unmaintained I wish to know if somebody already have a maintained for of this.
Since still there are many pending pull request currently

Best Regards!

This could be used regardless of the show/hide functionality to totally disable everything on the picker, like a read-only mode.

If this was in a read-only mode, should the UI be simpler?

Type: boolean

Document the props and events with the name, short description, expected type, and potentially a link to the demo site when it is active.

Show examples of how to consume using Svelte as well as a standalone component.

Jest testing library is already installed.

Testing library should already be installed.

serialize-javascript vulnerability is fixed in 2.1.1

rollup-plugin-terser PR fixes this: TrySound/rollup-plugin-terser#54 or TrySound/rollup-plugin-terser#53

Waiting for merge before updating rollup-plugin-terser

Currently the picker only takes into account the number of pages it is presenting to determine width. However, the width could also take into account whether the props for weekGuides, weekNumbers, and isoWeekNumbers are true.

This may also involve reworking some css as the positioning of the week numbers and iso week numbers may need tinkering.

Ideally the padding would be removed for the side info that isn't presented, as well as the width taking into the account the removed padding.

Example screenshot of the current "too much padding" method

Provide a prop to the consumer that allows them to pass an array of predefined ranges. Each range should contain a start and end date as well as a title / name.

This array could then be used to add the UI for the ranges to the picker.

Bonus: let the user choose the layout / position?

Type: Array

Allow the user to choose between 24hr or AM/PM time.

Type: boolean

Is this component consumable by any user?
Is it friendly to screen readers?
Is it keyboard accessible?
Is the html markup semantic?
Are there any frustrating experiences using any piece of functionality in the component?

This prop would prevent the user from selecting a range that spans past a given number of days/hours/minutes/seconds.

Type: potentially number (in days), if hours, mins, secs aren't concerned.

Right now the time pickers allow for a selection before or after the min and max dates.

Preferably using GitHub pages.

package in npmjs version is 0.3.0
when i import from npmjs, show me a error Uncaught TypeError: Class constructor te cannot be invoked without 'new'

when i import from github, it's ok. but u don't push build in the repository😂

Right now it is possible to select the next month from within the current month. This is because to render the calendars always with the same number of days it requires 6 weeks. However, providing the consumer the ability to toggle their select-ability on/off would make the component more flexible.

When the day meta data is built, the isDisabled could check for this prop.

Create a pop up style interaction using a button that shows the currently selected date.

• Smooth animation
• Lightweight footprint
• Can click "out" of to hide

Questions
Should this use another library or hand-code?
Should this even be a part of this component? If not, the consumer could potentially use the $set() functionality to update the temp state.

Related to: #7

Show / hide functionality shouldn't be a part of this component. It can be implemented in many different ways so it should be left up to the consumer.

$set functionality in JS apps can be used to reset or reactivity in svelte components can be used.

How small can this thing be made?!

Can the HTML, CSS, or JS performance, size, or structure be improved?

Improvements

Reference #26

• Remove need for hoverDate
• Remove unnecessary hasSelection references
• Simplify <TimePicker> html in <SDateRangePicker>

Should the consumer have the ability to provide a list of events that could show on the calendar?

It could be a few colorful circles inside the date circle.

Type: Array

In preparation for allowing theming of the component, remove all classes / styles not necessary for the grid system

This is part of the theming capability. There can be a few predefined themes that are optional, alongside the required styling within the svelte components. The consumer can either link to the css file or use their own.