# Ember Date Picker Component

**URL:** <https://discuss.emberjs.com/t/ember-date-picker-component/3289>\
**Category:** Design\
**Created:** [November 8, 2013, 8:32pm UTC](https://discuss.emberjs.com/t/ember-date-picker-component/3289 "2013-11-08T20:32:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![prashathsenthil](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@prashathsenthil](https://discuss.emberjs.com/u/prashathsenthil)\
**Post date:** [November 8, 2013, 8:32pm UTC](https://discuss.emberjs.com/t/ember-date-picker-component/3289/1 "2013-11-08T20:32:03Z")

</div>

I’m trying to create a date picker with Ember components. Primarily the date picker should be using web component something like [http://mozilla.github.io/brick/demos/x-tag-datepicker/index.html](http://mozilla.github.io/brick/demos/x-tag-datepicker/index.html)

This needs to be plugged with Ember component and should be used in handlebars {{custom-calendar}} which should be populating the customized calendar.

---

<div class="post-metadata">

**Author:** ![kanesteven](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kanesteven/32/3766_2.png) [@kanesteven](https://discuss.emberjs.com/u/kanesteven)\
**Post date:** [November 8, 2013, 8:55pm UTC](https://discuss.emberjs.com/t/ember-date-picker-component/3289/2 "2013-11-08T20:55:59Z")

</div>

Huge recommendation is to wrap a jQuery plugin for this. Reinventing the wheel to make a calendar widget is probably not worth your time. If you want some reference I did a barebones version of this here (I DO NOT STAND BY THE STRENGTH OF THIS CODE IT WAS JUST A TEST).

[https://github.com/stevekane/ember-calendar-component/blob/master/public/javascripts/components/KaneDatepickerComponent.js](https://github.com/stevekane/ember-calendar-component/blob/master/public/javascripts/components/KaneDatepickerComponent.js)

Here it is thrown up on heroku [http://ember-calendar-component.herokuapp.com/](http://ember-calendar-component.herokuapp.com/)

I recommend wrapping pickadate.js. It is easy to wrap and will give you a lot of power.

---

<div class="post-metadata">

**Author:** ![prashathsenthil](https://avatars.discourse-cdn.com/v4/letter/p/9e8a1a/32.png) [@prashathsenthil](https://discuss.emberjs.com/u/prashathsenthil)\
**Post date:** [November 8, 2013, 10:13pm UTC](https://discuss.emberjs.com/t/ember-date-picker-component/3289/3 "2013-11-08T22:13:24Z")

</div>

Thank you Steven.

I got to know your component via Github 2 days back. It was really good. I do have familiarity towards pickadate.js which is as you said lightweight and responsive. But just thought of checking whether there are some plugins available in Ember as we have in jQuery.