ember-pikaday-2.x

Published on Sep 30, 2016

ember-pikaday is a great addon for letting your users select dates.

This screencast shows how to use ember-pikaday version 2.x, including how to use some of the more common options.


Links

Code

$ ember install ember-pikaday
{{pikaday-input value=arriveDate onSelection=(action (mut arriveDate)) format="MM/DD/YYYY" readonly=true}}
import Ember from 'ember';

export default Ember.Controller.extend({
  //....
  arriveDate: Ember.computed(function(){
    let date = new Date();
    date.setDate(date.getDate() + 2);
    return date
  })
})

Transcript

Back in Episode 56, over a year ago, we covered ember-pikaday. But things have changed since then. The 2.X branch has a little bit of a different API, one that is more in line with Ember’s 2.X data down actions up paradigm. So we’re going to update our video and show how to use the new Ember pikaday. The example we’ll use here is our shopping cart, and we’re going to have a date picker for when we want our items to arrive.

First we’ll install ember-pikaday. Then in our checkout template, we’ll go ahead and put in a pikaday-input component. We’ll give it one option for now, that of value. The value we’re giving it is arriveDate. We’ll calculate that in our JavaScript. So we’ll create arriveDate, and we’ll make it a function that will be computed right off the bat. And of course we’ll be setting this later, but for now, we’re just going to be getting a new Date, and then we’re going to be adding two days to it, so the default is arriving in two days.

So we see that there is now a date displayed, the 29th day, I’m recording this on the 27th, of September in 2016. So far so good. Then we click here and it opens our pikaday, and this is pretty great, the usual wonderful pikaday stuff. Let’s say we want it delivered October 5th. Click that. Well, it’s changed here. Let’s double check something. Let’s check the controller and make sure it changed. And it did not. So the value in the controller hasn’t changed. It’s just changed aesthetically here. That’s because of the new data down actions up paradigm that pikaday is using. We need to use the onSelection option in order to get it to change.

So we’ll create an onSelection action, and this action we could define a onSelect action here, but we could also use our mut helper to define it right here in our handlebars. And we’ll be mutating the arriveDate. So let’s try this. We will change the date. We’ll go October 5th again. And then we’ll see in our controller it has changed the arrive date. And it’s also now no longer a computed property since we set it. That’s fine. The computed property was just to get us started. We could’ve put it in init if we wanted to.

So that’s the big change, the fact that value is now just a one-way binding to show what’s there initially. And the onSelection action is how things actually propagate, how the changes actually propagate out from pikaday input. There are other actions you can have, such as onOpen and onDraw. I don’t know the exact situations where you would use those, but they’re there if you need them.

Then of course there are all the options that we talked about in the previous video. You can change the format. So for example this format will be much more recognizable by people in the US. So currently here it’s day, month, year, but people in the US read month, day, year. So to us it looks like May 10th instead of October 5th. With the format option you can change that. There. Now it looks familiar to someone in the US. You’ll also notice that this is changeable by typing in stuff. It’s usually good to leave this on, but if you don’t want it, you can put in readonly=true, and then you’ll no longer be able to type. See the cursor isn’t there. You can only do it by selecting.

And there are lots of more options that you can find in the ember-pikaday documentation. Some interesting ones are the theme, so you can change how it’s styled, the various year ranges, so you can make sure people don’t pick things 20 years in the future, and if you want to be more specific, you can also do a minDate and a maxDate. A good minDate for this application might be today or tomorrow, depending on how quickly you can get stuff shipped. Then you can do things like disable it completely depending on various options and have some placeholder text. Finally if you can’t find the pikaday option that you want in ember-pikaday, then you can pass stuff directly through to pikaday using the options hash.

And that’s the final customization. The customization lets you do all of the customizations that you can find here. But also if you’re testing, then they have some handy test helpers. So good luck out there and enjoy this wonderful addon.

Subscribe to our mailing list