This is the enhanced date picker extracted from DCalendar plugin.
dmuy / dudatepicker Goto Github PK
View Code? Open in Web Editor NEWDate picker plugin for input elements
Home Page: https://dmuy.github.io/duDatepicker/
License: MIT License
Date picker plugin for input elements
Home Page: https://dmuy.github.io/duDatepicker/
License: MIT License
This is the enhanced date picker extracted from DCalendar plugin.
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
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 😄
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.
I want to add "dcalendarpicker" specific parent element not fixed position. Relative to the parent element.
is there any option for that ?
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.
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');
Configuration to allow disabling days (by specifying "Mon" or "Monday" or "M", etc) and dates (specifying specific dates).
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!
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'.
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
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.
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?
Missing commas.
Max date 2000 year and today = 1899 year
Is there a way to add a start date or when the dates or calendar should start showing?
I wanna use the datepicker without the header (the blue or dark theme).
What should I do?
:)
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.
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.
Why am I not able to listen to "date changed" event using $('body').on('date changed,'element',....{})??
This should be possible, right?
]
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); });
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.