CODEWITHSUNDEEP
javascriptangularjsmeteordatepickerangular-meteor
kramer65
kramer65

Reputation: 53873

How to add a datepicker to angular-meteor?

I've just started experimenting with angular-meteor, which feels good, but weird at the same time. The thing I'm uncomfortable with is the fact that everything is done with packages and that I'm unsure of how much I can do manually.

So I've followed the tutorial up until step 9 which made a simple party planning website. I now want to add a datepicker so that parties also have dates. For this I want to use something like Bootstrap Datepicker or angular-datepicker or this Meteor Datepicker but I'm unsure of which one to pick and how to do this.

Do I need to install everything in meteor using meteor packages? Should I use bower? Can I manually inject those libs using the regular <script src=""> way? And which one would be the most appropriate?

All tips are welcome!

Upvotes: 3

Views: 606

Answers (1)

SylvainB
SylvainB

Reputation: 4820

Since the impact of this feature is restricted to the presentation layer, how you choose to install / integrate your datepicker is mostly a matter of taste.

  • You can go for a meteor package, and get simpler integration (given that the package has no conflicting dependencies with your project, such as iron-router vs flow router) and updates (given that the package is seriously managed and maintained)
  • If you choose to go with bower or another package manager than meteor's (or none and just download the sources, for that matter), you'll need to integrate the library yourself (either through a custom package or directly in the client/lib folder) and update it manually. But you will get "official" updates from the actual library maintainers.

To keep things simple, I would personnaly go with rajit:bootstrap3-datepicker. It seems correctly maintained (last commit a couple months ago), and has enough installs for my taste:

$ meteor add rajit:bootstrap3-datepicker

Then in my template:

<label>Date</label>
<input type="text" class="form-control" id="my-datepicker" ng-model="newParty.date">

And in PartiesListCtrl I would set up the datepicker using:

$('#my-datepicker').datepicker();

If you consider doing the integration yourself after all, here are a couple useful SO links for you: here and here and here

Upvotes: 2

Related Questions