Angular strap datepicker dynamic startDate/endDate

Question

I have a scenario where I have a "parent" datepicker and a bunch of "child" datepickers, all within the same view. I will need to update the child pickers to be limited by the parent's date and the parent picker will need to be governed by the highest child date. I've tried setting this on the children pickers:

//child pseudo-code
<input data-date-end-date="parent.target_date" data-ng-model="child.target_date bs-datepicker />

//parent pseudo-code
<input data-date-start-date="highestChild.target_date" data-ng-model="child.target_date bs-datepicker />

but i just get a picker without the ability to select anything.

essentially a child should not be able to be put out passed it's parent and a parent can't be pulled in closer than it's highest child, but they all need to be able to update.

Answer 1

Part of the problem with your code is that Angular-Strap does not use data-date-* attributes, it uses data-*, which is unfortunately not well documented at the moment (if at all).

Another problem is that the start-date and end-date attributes normally work (when using only Bootstrap datepicker without Angular-Strap) by entering in a static date such as data-date-start-date="2013-09-03". Angular-Strap works the same way as many other Angular directives by letting you use the attribute like you normally would without Angular, but allowing you to use an Angular expression by using double curly brackets.

Eg ng-href="http://www.waddup.com/items/{{ item.number }}"

Your pseudo-code should end up being something like this:

//child pseudo-code
<input
    data-end-date="{{ parent.target_date}}"
    data-ng-model="child.target_date"
    bs-datepicker
/>

//parent pseudo-code
<input
    data-start-date="{{ highestChild.target_date }}"
    data-ng-model="parent.target_date"
    bs-datepicker
/>