When using ember-cli-bootstrap-datepicker the date I select on the calendar is not the date that displays on the input field when the calendar closes. It's the date selected -1 day.
However, I have another field that is bound to the same property {{expires_at}} and it displays the appropriate date I selected. I'm assuming this is a UTC conversion; even though it appears to happen no matter what time of day I try it. I am trying to figure out a way to have the ember-cli-bootstrap-datepicker input reflect the date I select.
The date being saved to the database is the correct date, however this is confusing my users seeing the incorrect date on the field.
The Bootstrap datepicker is bound to exprires_at field, which is backed by a rails backend with a date field - so the format it sends via JSON is YYYY-MM-DD as a string.
templates/admin/specials/form.hbs
<div class="form-group">
<div class="input-group">
<label for="expires_at" class="input-group-addon fa fw fa-calendar"> Expire Date</label>
{{bootstrap-datepicker value=expires_at todayBtn=true autoclose=true class="form-control"}}
</div>
</div> <!-- /.form-group -->
On the same template, I have a preview of what the output will generate, its a coupon so I have the fields displaying the actual coupon with all the data entered from the fields on the form so the end users knows what it's going to look like.
<!-- language-all: lang-html -->
<p<Expires {{short-date expires_at}}. For questions please call ...</p>
I have also tried this with out the short-date helper, and it still returns the correct date selected.
helpers/short-date.js
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function(value) {
// return moment(value, "MM-DD-YYYY");
return moment(value, "YYYY-MM-DD").format("MM/DD/YYYY");
});
package.json
"devDependencies": {
"broccoli-asset-rev": "^2.0.0",
"broccoli-ember-hbs-template-compiler": "^1.6.1",
"ember-cli": "0.1.15",
"ember-cli-6to5": "^3.0.0",
"ember-cli-app-version": "0.3.1",
"ember-cli-bootstrap-datepicker": "0.3.1",
"ember-cli-bootstrap-sassy": "0.0.12",
"ember-cli-content-security-policy": "^0.3.0",
"ember-cli-dependency-checker": "0.0.7",
"ember-cli-font-awesome": "0.0.9",
"ember-cli-form-data": "0.0.8",
"ember-cli-ic-ajax": "0.1.1",
"ember-cli-inject-live-reload": "^1.3.0",
"ember-cli-moment": "0.0.1",
"ember-cli-qunit": "0.3.7",
"ember-cli-sass": "^3.1.0-beta",
"ember-cli-simple-auth": "0.7.3",
"ember-cli-simple-auth-devise": "0.7.3",
"ember-cli-uglify": "1.0.1",
"ember-data": "1.0.0-beta.14.1",
"ember-export-application-global": "^1.0.2",
"ember-localstorage-adapter": "^0.5.2",
"express": "^4.8.5",
"glob": "^4.0.5"
}
bower.json
"dependencies": {
"handlebars": "~1.3.0",
"jquery": "^1.11.1",
"ember": "1.8.1",
"ember-data": "1.0.0-beta.14.1",
"ember-resolver": "~0.1.11",
"loader.js": "ember-cli/loader.js#1.0.1",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
"ember-cli-test-loader": "ember-cli/ember-cli-test-loader#0.1.1",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
"ember-qunit": "0.2.8",
"ember-qunit-notifications": "0.0.7",
"qunit": "~1.17.1",
"bootstrap-sass-official": "~3.3.3",
"ember-simple-auth": "0.7.3",
"bootstrap-datepicker": "~1.3.1"
}
I could probably hide the actual input field for the bootstrap picker and just show another {{exipres_at}} field, but I feel like there's away to get the datepicker to show local time and I'm just missing it. I have almost no configuration for it, and not sure where I should be passing in any options besides inline but I do not see the option for local time.