Dynamically set e-min-date inside a form

[Snippo]

Hi,

I am trying to update a second datepicker based on the date chosen on the first one. This works fine when using it outside of a form, but for some reason doesn't work when used inside a form.

Here is a jsfiddle which shows the problem: http://jsfiddle.net/grk2eyqo/5/ Changing the value of the first datepicker will not change the second datepicker inside the form, but for the controls outside the form it does. (it took me a while to find out the form was the problem, so the directive is probably unnecessary in this case).

I think it has to do with the local model not being updated on selecting a date, but this should not affect the properties of the datepicker? Maybe the datepicker has to be refreshed in some way which automatically happens when the local model is changed?

Anyone knows a solution? Thanks.

[ckosloski]

Did you try $parent.$data instead of $data in e-ng-change="setDate($data)

[Snippo]

Just tried it but that doesn't solve it. The data seems to be correct (the variable is set to the right date in a console.log()), but the value for some reason does not affect the e-min-date property.

[ckosloski]

Maybe try using date picker options to set the min date. This seems a little similar to this ui-bootstrap issue (the last post suggests using options) https://github.com/angular-ui/bootstrap/issues/3188

[Snippo]

e-datepicker-options works outside of the form, but not inside the form: http://jsfiddle.net/grk2eyqo/6/ So that unfortunately doesn't solve it.

[ckosloski]

I think this is a ui-bootstrap and not a xeditable issue. Look at this thread - https://github.com/angular-ui/bootstrap/issues/6025

It seems like you could try to set the datepicker options as a scoped variable and then update the mindate on that.

[Snippo]

I found a workaround. I think the problem is caused because the datepicker is not reinitialized when opened inside the form. In normal usage, you first get the x-editable 'text box' with the datepicker attached to it. In the form the datepicker is always 'opened', thus not applying any changes.

The workaround is using ng-if on the datepicker which should be updated and a watcher on the datepicker which is changed: http://jsfiddle.net/grk2eyqo/9/ The ng-if variable is then toggled inside a time-out function and the second datepicker is updated.

[ckosloski]

That makes sense. Did you want to close this issue then?

[ckosloski]

@Snippo should this issue be closed?

[Snippo]

I'm sorry, I did not see your previous comment. I believe the issue is still there, but the workaround I posted works fine. However, I am not using it anymore so in my opinion it can be closed.

[ckosloski]

OK, can you please close the issue?