ember-pikaday

Published on Jul 18, 2015

Pikaday is a great date selector. ember-pikaday wraps it up nicely as a component.

In this episode, we explore using ember-pikaday and how to use some of the options.

UPDATE: I have created a screencast for ember-pikaday 2.x.


Links

Code

$ ember install ember-pikaday
{{pikaday-input value=model.publishDate format="MM-DD-YYYY" placeholder="When would you like to publish?"}}

Transcript

Today I’ll be showing you how to input dates into your form with ember-pikaday. Now there are lots of date input helpers for Ember. So why ember-pikaday? Well, it’s very easy to use, you can just put it in there, it’s customizable, and you can either type it in the box or select it with a picker, and I’ll show you what that means a little bit later. So those are all the reasons.

I told you it was easy to get started. Let me show you how easy. So we install the addon like we do a normal ember addon. Then we’ll just put our pikaday-input component into our template. And with just that one line we have a date picker. We can see that we can click on it, we can change the date. We can also change the date by typing it in, and this is really convenient for if we want to say change the year or the month without clicking through all of these.

So far it looks pretty good. But if you’re in America, you’re probably reading this as December 4, 2015, when really it’s April 12, 2015. Let’s fix that. We can change the format using momentjs’s string formatting. So we can turn this... this is the month then the day then the year. Let’s go ahead and use that. So now this display is like most Americans are used to seeing it. If you want to make other changes, you just use this format. There is a handy reference right here.

Now let’s say that you want people to be able to select from here, but you don’t want them to be able to type in their own code. We can use the readonly attribute for that. When we set readonly to readonly, now we can choose dates but we can’t edit the field directly. So readonly sets it so that you can only write to it, write to the model with the selector. It’s not actually readonly. If you want to completely disable it, then you use disabled=true. Then we check the results and oh-oh, there’s an error. Now hopefully this will be fixed by the time that this screencast comes out, but if not, you can use this branch I’ve created. So [02:44] install that, and you can see that when we click on it, it does nothing, so it’s completely disabled.

Another easier to access option is the placeholder. It won’t display here but if we do a new one, it will... if I’d made it shorter helpfully suggest what we’re supposed to do.

So those aren’t all the pikaday features. There’s also UTC time zones, there’s localization, and there’s testing. And for the observant, you may notice that there is the original Pikaday, which has a lot more options, a lot more ways you can configure it. Unfortunately, we can’t access all of those. For example, I tried disableWeekends and the weekends were not disabled.

So ember-pikaday is a great way to access the power of Pikaday very easily, and have some great things like test helpers that are meant for Ember. Unfortunately you can’t access the full power of Pikaday, but I think that tradeoff will most likely be worth it for you. So thanks for watching and I hope to see you in the pro-episode where we talk about ember-cli-flash.

Subscribe to our mailing list