Attach to multiple inputs?

[mgibbs189]

How do I attach Pikaday to multiple inputs?

E.g. a typical jQuery approach would look something like this:

$('.date-picker').pikaday();

[mgibbs189]

From what I can tell so far, the easiest way would involve having to create a loop:

var picker = [];
$('.date-picker').each(function(idx) {
    picker[idx] = new Pikaday({ field: $(this) });
});

Is there a simpler way?

[dbushell]

Yep that would be the quickest way. If you don't need to reference the instance later you can just do:

$('.date-picker').each(function() {
    new Pikaday({ field: $(this) });
});

Or better yet do this inside the loop:

$('.date-picker').each(function() {
    $(this).data('pikaday', new Pikaday({ field: $(this) }));
});

then later you can access:

// field is a single .data-picker jQuery reference
field.data('pikaday').nextMonth();

In future I may write a small (optional) jQuery wrapper so that you can use it like other plugins.

[dbushell]

For anyone who has never used .data() in jQuery (API reference) it allows you to store key/value data against an element. It will also automatically pull in content from HTML5 data-* attributes when the element is first selected via jQuery.

[mgibbs189]

Right. The .each() and .data() approach is great. A jQuery wrapper (bundled within pikaday.js) would go a long way towards people making the switch away from jQuery UI datepicker.

[dbushell]

Not a bad idea :)

For now I've written a jQuery version (see /plugins in the repo) — it's basically just the normal version with a wrapper heading it. I'll consider throwing this into the pikaday.js for simplicity. That or rewrite the whole jQuery version to take advantage of things like class and event management. A jQuery-dependent version would be smaller.

[mgibbs189]

Cool. Well it looks like you're on the right track. Looking forward to seeing how this all pans out.

[ronilaukkarinen]

I bashed my head with this for couple of hours and didn't get any of the examples to work... no errors in log, but no datepickers either.

Ended up just copying it like this:

// Datepickers
var startdate = new Pikaday({
  field: $('.reservation').find('#startdate')[0],
  format: 'DD/MM/YYYY',
  firstDay: 1
});

var enddate = new Pikaday({
  field: $('.reservation').find('#enddate')[0],
  format: 'DD/MM/YYYY',
  firstDay: 1
});

[hugomelo]

Passing $(this) (jQuery object) doesn't work for me:

var picker = [];
$('.date-picker').each(function(idx) {
    picker[idx] = new Pikaday({ field: $(this) });
});

It only work when I use only this. The direct element.

var picker = [];
$('.date-picker').each(function(idx) {
    picker[idx] = new Pikaday({ field: this });
});

[giovanigenerali]

@hugomelo try to use like this $(this).get(0) or $(this)[0] http://api.jquery.com/get/

var picker = [];
$('.date-picker').each(function(idx) {
    picker[idx] = new Pikaday({ field: $(this).get(0) });
});

var picker = [];
$('.date-picker').each(function(idx) {
    picker[idx] = new Pikaday({ field: $(this)[0] });
});

[Dennniss]

Hello, i am using Ninja form, is there a way to select different dates in the Pickaday calendar in the same form field separeted with , for example?

[jtlindsey]

In some cases the .each and $(this) wasn't working for me. The alternative that worked was grabbing the element in the callback:

$('.datepicker').each(function(i, e) {
  new Pikaday({
    field: e,
    ...
  });
});

[chethan1095]

can we select only time using pikaday

[hugomelo]

@chethan1095, there's an explaination in the README

[gresbtim]

what's the no jquery equivalent?

[eLIANT-TechnologyServices]

On Mar 7, 2017, ronilaukkarinen said this method worked for him, but I'm getting nothin. When I applied Pikaday to just one input, it worked fine. But trying to apply to more than one produces no pop-up calendars on any of the input fields.

For context, it's an on-line job application form.

var App = new Date();
App.setDate(App.getDate() - 1);
var pickerApp = new Pikaday({
  field: document.getElementById('Applied-before-date'),
  maxDate: App
});

var Emp = new Date();
Emp.setDate(Emp.getDate() - 1);
var pickerEmp = new Pikaday({
  field: document.getElementById('Employed-before-date'),
  maxDate: Emp
});

var bd = new Date();
bd.setDate(bd.getDate() - 5479);
var pickerBD = new Pikaday({
  field: document.getElementById('Birthdate'),
  maxDate: bd
  defaultDate: bd

[milholen]

@eLIANT-TechnologyServices the working code examples above are compatible with jQuery syntax, your code examples are native JS. I don't think the non-jQuery version of Pikaday supports this. See issue #123

Either add jQuery to your project (if you have a ton of fields to initialize) or if your app has a limited number of fields you can just instantiate Pikaday for each known field.

[eLIANT-TechnologyServices]

Thanks for your reply. From your profile picture you don't appear to be a child, so maybe you can appreciate what I'm about to say. Dude, I'm tired of learning new languages. I've gone through 14 different programming, scripting, and report-writing languages in my carrier - since before there were PCs. I really do appreciate your response, but I just started with JS this year, and I don't think I could make myself study hard enough to understand the meaning of $('input.datep').pikaday({ firstDay: 1 }); From what I've seen, Pikaday has not been updated or supported officially for a very long time. Is there an alternative? Sincerely, Philip W. Kelly eLIANT Technology Services <http://www.eliantservices.com/> www.eliantservices.com 937-974-5521 From: milholen <notifications@github.com> Sent: Sunday, August 23, 2020 5:47 PM To: Pikaday/Pikaday <Pikaday@noreply.github.com> Cc: eLIANT-TechnologyServices <pkelly@eliantservices.com>; Mention <mention@noreply.github.com> Subject: Re: [Pikaday/Pikaday] Attach to multiple inputs? (#2) @eLIANT-TechnologyServices <https://github.com/eLIANT-TechnologyServices> the working code examples above are compatible with jQuery syntax, your code examples are native JS. I don't think the non-jQuery version of Pikaday supports this. See issue #123 <#123> Easiest solution: add jQuery to your project. - You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQAPVFUNYM4QMUMN4JKHLCTSC GE4DANCNFSM4ABRSU6A> .

…

-- This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

[gresbtim]

lmao. Philip, since this is my company account i can't flame you.

but

$('input.datep').pikaday({ firstDay: 1 });

$('input.datep') is usage of the jQuery library and returns a collection of elements.

.pikaday( then calls the plugin "pikaday" for each of those elements and { firstDay: 1 } are the parameters for pikaday

have a nice day.

[eLIANT-TechnologyServices]

Look at you – making me learn something new. Okay, first things first… how do I “activate” JQ? Like with JS I use <script>…</script>. Do I do the same thing but just put JQ between <></>? Sincerely, Philip W. Kelly eLIANT Technology Services <http://www.eliantservices.com/> www.eliantservices.com 937-974-5521 From: Tim <notifications@github.com> Sent: Monday, August 24, 2020 3:57 AM To: Pikaday/Pikaday <Pikaday@noreply.github.com> Cc: eLIANT-TechnologyServices <pkelly@eliantservices.com>; Mention <mention@noreply.github.com> Subject: Re: [Pikaday/Pikaday] Attach to multiple inputs? (#2) lmao. Philip, since this is my company account i can't flame you. but $('input.datep').pikaday({ firstDay: 1 }); $('input.datep') is usage of the jQuery library and returns a collection of elements. .pikaday( then calls the plugin "pikaday" for each of those elements and { firstDay: 1 } are the parameters for pikaday have a nice day. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQAPVFQFATQP4UE2WMMNQXTSCIMKFANCNFSM4ABRSU6A> .

…

-- This email has been checked for viruses by Avast antivirus software. https://www.avast.com/antivirus

[gresbtim]

jquery is a library written in javascript
https://jquery.com/

you add the jquery source to your html site and then can use jquery functions within javascript code