Skip to content

Instantly share code, notes, and snippets.

@arshad115
Last active August 1, 2018 11:43
Show Gist options
  • Save arshad115/678bfaf75ac74abbd56132d0d4f06387 to your computer and use it in GitHub Desktop.
Save arshad115/678bfaf75ac74abbd56132d0d4f06387 to your computer and use it in GitHub Desktop.
How to bind data correctly with ng-model with angular uib-datepicker-popup

How to bind data correctly with ng-model with angular uib-datepicker-popup

If you get a date from a database and you bind it to the Angular ui datepicker and it does not bind correctly, you just have to convert it into a date object on init like:

JS

data.bsc = new Date(data.bsc);

HTML

                        <div class="form-group">
                        <label class="col-sm-2 control-label no-cursor">Date:</label>
                        <div class="col-sm-4">
                            <p class="input-group no-margin">
                                <input type="text" class="form-control"
                                       uib-datepicker-popup="yyyy-MM-dd"
                                       ng-change="formatUplusManual();"
                                       ng-model="data.bsc"
                                       is-open="uplusmanualDateOpened"
                                       ng-required="true"
                                       close-text="Close" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default"
                                            ng-click="uplusmanualDateOpened = true">
                                        <i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </span>
                            </p>
                        </div>
                    </div>
                    

Reference: angular-ui/bootstrap#4616

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment