dmuy / dudatepicker

Date picker plugin for input elements

duDatepicker

This is the enhanced date picker extracted from DCalendar plugin.

Documentation

• Installation
• Options
  • Configurations
    • Callback Functions
  • Formatting
• Usage
  • Built-in Methods
  • Min and Max
  • Disabling Dates/Days
  • Date Range
  • Internationalization
  • Event Handling
  • Themes
• Usage (Vue)
  • Nuxt

DEMO

Screenshots

dudatepicker's Issues

I can select disabled dates

Hi, I have disabled dates disabledDates: ['05 .01.2021-10.01.2021 '] but I can still select these dates, it's sad, can I do something about it?
Thanks!

Not Work

Missing commas.
Max date 2000 year and today = 1899 year

How can i make it like the last two pictures

I wanna use the datepicker without the header (the blue or dark theme).
What should I do?
:)

Spanish translation suggestion

The translation for the 'Clear' button should be 'Vaciar' or 'Limpiar' instead of 'Despejar' which does not apply in this context.
The most accurate would be 'Vaciar' although you can use any of both suggestions.
Good day.

request : option for DOM parent node

Hello.
By default, a calendar is appended to the body element. Is it possible to add an option to define a DOM parent node?
I would like the calendar to be appended to another DOM node rather than body.
Actually I have managed a small code that move the calendars DOM element to another parent node after the calendars are built. It would be more simple to append directly to the target node parent directly within your code.

#953
hf.appendTo(picker.container, document.body);
and a few other lines including 'document.body'.

Start date

Is there a way to add a start date or when the dates or calendar should start showing?

Date changed event not firing on 'body'

Why am I not able to listen to "date changed" event using $('body').on('date changed,'element',....{})??
This should be possible, right?
]

setMinDate and setMaxDate as built-in methods

Hi,

I am considering this datepicker as a replacement for another one in an existing project, because a) it's more intuitively in your date picker to change the year and b) it looks much better than the currently used date picker. But to do so it's important that I can change the minDate and the maxDate properties at runtime, similar to the setValue built-in method that already exists.

Is that a feature you would consider to implement in your date picker?

Dates are not visible propery/incorrect date when Popup opens

On input, I am keeping the value as "20-Sep-2022".
Then I apply the duDatepicker with format as 'dd-mmm-yyyy'.
On popup open, it shows it as '20-Dec-2021' on Datepicker.

This is happening in parseDate fn because monthIdx is -1 and new Date(year, monthIdx, date);
monthIdx is -1 because our month format is not full and does not go inside the if clause.
Please look into this as well.
Something is off about it.
Latest version is 2.0.3 and when downloaded it still shows 2.0 for some reason

Disable or select half day

Hi, how can I disable half day or select half day, eg. for hotel booking?
Thanks!

eg.

Date range format

When setting up a date range with two inputs, if I try to format both fields as follows, I get an error:

$("#datefrom").duDatepicker({format: "mmmm dd, yyyy"});
$("#dateto").duDatepicker({format: "mmmm dd, yyyy"});

The error occurs on click and says: duDatepicker.js:559 Uncaught TypeError: Cannot read property 'length' of undefined

If I remove the formatting option on the $dateto field, it works as expected.

Reset range when selecting new date

Is there an option to reset the range when the user selects a date after already having two dates selected? Currently it changes one of the two dates of the range (the closest), but I would like to reset it. Thank you!

_getYears() should consider minDate and maxDate

Hi!

I saw that you have already implemented my last feature requests, thanks for that! After this goes so well, I have directly the next suggestion. 😊

Could you consider the minDate and the maxDate in your _getYears() method?

Let's say you have a maxDate of 12/23/2022. Then 2022 should be the last year you get if you click on the year in the date picker, even if laterYears has a much larger value since you can't select any date in 2023 or later anyway.

Specific days/dates to disable

Configuration to allow disabling days (by specifying "Mon" or "Monday" or "M", etc) and dates (specifying specific dates).

Make the year range for _getYears() configurable

In your _getYears() method you defines the following values:

_minYear = _.viewYear - 50,
_maxYear = _.viewYear + 25,

Would it possible to make these values configurable?

Use case: Among other use cases, i would also like to use the date picker as a picker for the birth date. The current year minus 50 years are not enough and I fear that the users don't understand that they can click again on the year to get other years for selection. So I would like to change the value for the MinYear to something like _.viewYear - 100.

Multiple dates not work as spected

duDatepicker version: 2.0.2

Code:
duDatepicker('#daterangemultiple', {multiple: true, i18n: 'es', format: 'dd/mm/yyyy'});
...
tmp_values = ["01/05/2022", "02/05/2022"];
...
duDatepicker('#daterangemultiple', 'setValue', tmp_values);
duDatepicker('#daterangemultiple', 'show');

Description:
I try to describe the issue, sorry for my english.
Open duDatepicker, if you click in some dates and push OK button, all works (show from console output):
{
"isTrusted": false,
"data": {
"_dates": [
"2022-05-19T22:00:00.000Z",
"2022-05-25T22:00:00.000Z",
"2022-05-27T22:00:00.000Z"
],
"dates": [
"20/05/2022",
"26/05/2022",
"28/05/2022"
]
}
}

The issue happens when you stablish some dates in JS, open duDatepicker and click OK button without clicking more dates, JS stablish dates appears selected in duDatepicker, but in this case not work, console show:
{
"isTrusted": false,
"data": {
"_dates": [],
"dates": []
}
}

Images:
First time open duDatepicker and click some dates, push OK and receive dates selected:

Then, you in your JS stablish previous selected dates and show:
tmp_values = ["20/05/2022","26/05/2022","28/05/2022"]
duDatepicker('#daterangemultiple', 'setValue', tmp_values);
duDatepicker('#daterangemultiple', 'show');

duDatepicker apears with previous dates marked:

But when you push OK button no dates are returned:

Request : internationalization

Hello.
Very good script, nice and effective. Nevertheless it's missing a key feature : internationalization.
Browsing the code I found very easily how to change the language but this is not a convinient way to do it.
What about an option giving an array for the day of the week ? Or an external file ?
Also is missing the possibility to change the first day of the week. In many countries it's monday and not sunday.
Can you think about these ?
thx.

Using inline inside jquery UI

Hello

I need to use the inline feature but inside a Modal Form from jQuery UI.
I think it's easy to check. This is the link from jQuery UI where you can just add duDatpicker to the popup "Create New User".
https://jqueryui.com/dialog/#modal-form

Outside the popup the inline feature works fine.
This is the code for duDatepicker:
duDatepicker('#dt1,#dt2', { auto: true, inline: true, format: 'yyyy-mm-dd', //range: true, // Determines if Clear button is displayed clearBtn: true, // Determines if Cancel button is displayed cancelBtn: true, // Determines if clicking the overlay will close the date picker overlayClose: true, });

This is the screenshot where I just add #dt1 (works fine) outside the popup and #dt2 (doesn't display the calendar) inside the popup:

Regards

Uncaught TypeError: Cannot read property 'appendChild' of null

Hello I've trying to use the last datepicker versión in a rails application, but when I try to call the initializer I get the following error:

document.ready(function {
Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.appendTo (duDatepicker.js:69)
    at _duDatePicker._init (duDatepicker.js:966)
    at new _duDatePicker (duDatepicker.js:884)
    at duDatepicker.js:1822
    at Array.forEach (<anonymous>)
    at duDatepicker (duDatepicker.js:1820)
    at HTMLDocument.<anonymous> (datepicker.js:7)

This is my initializer:

import '@dmuy/datepicker/dist/duDatepicker.css'
import duDatepicker from '@dmuy/datepicker'

document.addEventListener("DOMContentLoaded", function(){
  duDatepicker('#appointment_form_presenter_date', { format: 'mm-dd-yyy' });
})

I took the snippet from the wiki https://github.com/dmuy/duDatepicker/wiki/Installation

I'm not sure If I'm missing something else.

I hope you could help me. Thanks in advance 😄

Datechange, different format

Hello,

Great plugin!
Is it posible to get a different format back on "datechanged"?
Need a "database" ready format because I've got a language related bug in my php code.

Something like this:
$('#datepicker').duDatepicker({ format: 'd mmmm yyyy', maxdate: 'today', auto: true }).on('datechanged', function(e){ var thedate = e.date({format: 'd mm y'}); alert(thedate); });

Option to append "dcalendarpicker" to specific parent element not bottom of the page.

I want to add "dcalendarpicker" specific parent element not fixed position. Relative to the parent element.

is there any option for that ?