Stefan Petre

Colorpicker and Datepicker updates

I manage to free some time to work on this two widgets, take every E-mail by hand and fixed all the issues out there.

Colorpicker:

Datepicker:

Comentarii (30)

Staicu Ionutb

23 mai 2009, 14:23

There is a small problem on datepicker: check the „close on selection” checkbox, try to change month by clicking on the month name then try to pick a month.

I guess the onChange should act only on day change ;)

Stefan

25 mai 2009, 15:03

You are right. I will fix that.

Ovidiu Ungureanu

9 oct 2009, 10:31

Hi. Is there any option to close the datepicker from within ?
A small icon or a link. There no problem in adding it but I did not found how what should I call to make it close.

Thank you

James Bebbington

15 oct 2009, 13:30

Hi,

Is this the proper place to report issues with the Datepicker plugin? There's no contact details or support links on http://www.eyecon.ro/datepicker/ that I can see.

I just wanted to note that Datepicker doesn't appear to be compatible with Sprockets http://getsprockets.org/

The problem is that Sprockets also uses the syntax causing it to throw up if you try to require datepicker.js. See http://getsprockets.org/installation_and_usage#inserting_string_constants for more info.

Now I guess this more an issue with Sprockets (I'll file a bug with them) than with Datepicker but I figured it would be worth sharing with others who may run into the same problem.

James Bebbington

15 oct 2009, 13:49

Re: last comment. Sprockets ticket can be found here: https://prototype.lighthouseapp.com/projects/8888-sprockets/tickets/23-add-option-to-ignore-string-constants

Kevin Triplett

16 oct 2009, 03:54

Hi Stefan,

May I ask for a new option to datepicker? (excellent plugin, btw)

I would like to specify an offset for this line in the DatePicker.fill function:

date.addMonths(-currentCal + options.offset + i);

with option defaulting to 0.

This allows the first calendar of a multi-calendar display to start with the current month when offset = 1.

Thanks for considering this -- an again, excellent plugin, thanks for your brilliant work!

Kevin Triplett

16 oct 2009, 04:31

Ha, never mind, it is not that simple. But we can do this without any modification with this jquery code:

$($(".datepickerGoNext a")[0]).click();

Or something like that -- I am not a jQuery expert yet.

Kirill

14 dec 2009, 09:00

Hi, i have a little trouble with colorpicker - main area don't reacts on click event. Only on mousemove.
I added $('div.colorpicker_color').bind('click', current, moveSelector); on line 169

Kirill

14 dec 2009, 09:19

Ooops. That was a bad idea. Now i think, a better way - is to call moveSelector(ev) in upSelector

Robin

1 nov 2011, 12:57

Thanks for a great little date picker. The only problem with the date picker is when selecting a year or month, this action hides the picker when selecting "close on selection". This can be fixed by moving the line:

changed = true;

from line 576 to line 573 before the break;

Enjoy ;)

Jet Brad

18 nov 2011, 12:57

Hi, just want to ask how am i going to set an array date.
for example in
onBeforeShow: function(){
$('#widgetCalendar').DatePickerSetDate($('#datesString').val(), true);
}

i have an input with ID datesString and value is an array.

I would really appreciate a quick response on this.

Thanks

Vitaly Leonov

22 dec 2011, 22:51

Hello from Russia!!
Thanks for a date picker! How I can use it with multiple inputs on page? Then PHP page creates, it my be have 4 and mode inputs (for Data). I can't see where I mast to insert code that take the ID of current input.

I change line 53 at layout.js: $('.inputDate').DatePicker({
to $('input[class^="inputDate"]').DatePicker({

but at lines 55, 56, 61, 64, and 66 I need to the current ID.
at your code it is (line 55): date: $('#inputDate').val(),
how I can get the current id and past it to your function instead of '#inputDate' ??
Thank You!!!

Casey

16 ian 2012, 20:24

Just curious to know if you have any method to clear the feild of the color picker, so the user can leave the feild blank if desired.
-Thanks

Wandrille

21 ian 2012, 20:04

Hey,
I wanted the same thing (I guess as Vitaly Leonov) and I found a bug when I initialize on a list of elements like this:
$('input.put_a_datepiker').DatePicker(...);
in this case $(this).data('datepicker') was the same object for all date pickers (last one created).
I added a line in init() inside this.each loop:
return this.each(function(){
if (!$(this).data('datepicker')) {
options = $.extend({}, options); // I added this one

So now I can use this:
$('input.pickdate').DatePicker({
position: 'bottom',
view: 'days',
onChange: function(formated, dates){
var input_field = $(this).data('datepicker').el;
$(input_field).val(formated);
$(input_field).DatePickerHide();
}
});

Hope this will help some of you guys.

Thanks for the good work Stefan.

W

Cristian Benescu

12 feb 2012, 18:31

Salut. Am folosit Colorpicker la aproape toate proiectele mele de pana acum, dar am avut nevoie doar de HEX. Si putem foarte usor sa schimb culorile folosind exemplul tau :
$('#colorSelector div').css('backgroundColor', '#' + hex);

Acum am nevoie sa folosesc RGB-ul intr-un RGBA si nu pot sa imi dau seama cum sa adaug valoarea corect.

alert(hex); in "onChange" imi arata valoarea hex corect
alert(rgb); imi arata "[object Object]"

Am nevoie sa adaug valoarea rgb in : '.... rgba('+rgb+',0.2)....
rgb ar trebui sa imi dea valoarea "33,225,120" de exemplu.

Crezi ca ma poti ajuta?

Multumesc anticipat

Cristian Benescu

12 feb 2012, 22:49

Am rezolvat. Nu stiam sa folosesc hash-urile. javascript rookie here.

rgba('+rgb["r"]+','+rgb["g"]+','+rgb["b"]+',0.2)

Victor

13 feb 2012, 16:59

Felicitari si multumesc pentru colorpicker, il folosesc pentru proiectul meu si este excelent! Am avut o mica problema cu el, o descriu aici, poate foloseste si altora:

The color picker doesn't react on click events: so I had to add the following lines:

to function downHue: $(document).bind('mousedown', current, moveHue);
to function upHue: $(document).unbind('mousedown', moveHue);
to function downSelector: $(document).bind('mousedown', current, moveSelector);
to function upSelector: $(document).unbind('mousedown', moveSelector);

Sos

3 mar 2012, 10:09

Hello there,
Thank you very much for the date picker plugin, it is really helpful

I'm sorry to ask you this, but as a bigenner in JS, I need help in entering the selection into my database using PHP
how can I store the start and end of selection dates and push them into the database?

jerome

21 iun 2012, 22:14

Hi stefan,
you controls are very interesting but when using two custom datepickers with a custom widget I am not able to put the date of any calendars mannually.

do you have any idea how to do this?

Topp Brocales

4 iul 2012, 00:54

Hi Stefan,

The plugin you created really comes in handy for our forms! I was just wondering if there's a way to set up the date selection with the current date (today) selected? I looked at plugin page and there was no reference on how to do that. Sorry but not I'm not a jQuery expert so my knowledge is limited.

By the way, we've implemented the plugin through a text field.

Thanks,

Topp

David Votrubec

6 sep 2012, 17:43

Hi Stefan,

thanks for the calendar plugin.
I've found & fixed a bug in it.
When the input field had incorrect value than the widget NaN instead of numbers. So the calendar looked like NaNNaNNaNNaNNaNNaNNaNNaN :)

Example of incorrect value: ' /10/ ' instead of '05/10/2000'

I've fixed it by addding these lines of code:

isValidDate = function (d) {
if (Object.prototype.toString.call(d) !== "[object Date]")
return false;
var isValid = !isNaN(d.getTime());
return isValid;
},

fill = function (el) {
var options = $(el).data('datepicker');
var cal = $(el);
var currentCal = Math.floor(options.calendars / 2), date, data, dow, month, cnt = 0, week, days, indic, indic2, html, tblCal;
cal.find('td>table tbody').remove();
for (var i = 0; i < options.calendars; i++) {

// Modification by St-Software to prevent NaN NaN NaN bug when encountered Invalid Date
var currentDate = isValidDate(options.current) ? options.current : new Date();

//Rest of the code is unchanged


Have a great day

David

David Votrubec

7 sep 2012, 10:14

Fix #2

There is a bug related to the previous one.
User set some invalid date in the input field. Datepicker shows calendar with correct values. But after user clicks on a date to select it, he get another NaN NaN NaN value.

Line 530 in datepicker.js
method 'click'

// Modification by David Votrubec to prevent NaN NaN NaN bug when encountered Invalid Date
var currentDate = isValidDate(options.current) ? options.current : new Date();

var tmp = new Date(currentDate);

David Votrubec

7 sep 2012, 10:21

I've noticed that some people also post codes, fixes etc here in comments, I don't know if you have updated your plugin or not. Probably not, it seems that I have version from 2009.
Would you mind sharing it on GitHub so that other people could fork it and make their own fixes, adaptations etc?

Thanks :)

David Votrubec

11 sep 2012, 11:07

Since there was no answer from you for several days I have uploaded the modified version to GitHub.

Link: https://github.com/ST-Software/Scripts/tree/master/datepicker

Tony

5 apr 2013, 12:55

Hello. Thanks for datepicker. Realy rocks!!!
But I have an issue: when I use-it hidden, when I call a routine to show-it, it cames with no skin... Can I rebuild the graphics some how?
How do you think I can fix this?
Thanks.

Great job.

Max

16 iul 2013, 14:49

it is necessary to datepicker not display the old date, not earlier than 1970. Should display the date after today
How to do this?
I'm stuck
Thank You

Bob Stucky

23 oct 2013, 19:27

Suggest the following feature - disabling keyboard entry so the user must select from the calendar.

Add following lines at 87:

this.keyboardEntry = true;
if ( 'keyboardEntry' in options ) {
this.keyboardEntry = options.keyboardEntry;
} else if ( 'dateKeyboardEntry' in this.element.data() ) {
this.keyboardEntry = this.element.data( 'date-keyboard-entry' );
}

Add at the bottom of the keyDown handler circa line 825:

default:
if ( !this.keyboardEntry ) {
e.preventDefault();
}

Regards - and thanks for the widget!

Rommel Meza

3 iun 2014, 02:55

well im using the control with Angular and look pretty awsome but angular load dynamically the pages in a different context and for add the line 396 yo add the control to the body. Thats good but not works for angular js, i recommend to change that:

Original Line:
cal.appendTo(document.body);

Fix:
cal.appendTo($(this).parent());

Gaston

9 iun 2014, 16:55

Hi. I would like to know if there is a way to make the datepicker hide after a date is selected. Now you have to click next to it to make it go away.

i got the link to this website inside the bootstrap-datepicker.js file.

reza

16 ian 2015, 01:07

Hi, How support this datepicker for persian and jalali date?

Adauga comentariu
* Campurile marcate sunt obligatorii
eyecon.ro is using cookies to personalise content and ads, to provide social media features and to analyse our traffic. I also share information about your use of my site with my social media, advertising and analytics partners.See details

By continuing to browse the site you are agreeing to my use of cookies. ✔ Continue