Silver challenge:sighting date

Frontend Web Development: The Big Nerd Ranch Guide Chapter 24: Controllers
1

edit.js:

    import Controller from '@ember/controller';
    import {  computed } from '@ember/object';
   export default Controller.extend({
      sighting: computed.alias('model.sighting'),
      sightingDate: computed.alias('model.sighting.sightedAt'),
      actions: {
        update() {
          this.set('sightingDate', new Date(this.sighting.sightedAt));
          if (this.sighting.get('hasDirtyAttributes')) {
            this.sighting.save().then(() => {
              this.transitionToRoute('sightings');
            });
          }
        }
    ......

in edit.hbs:

    <div class="form-group">
    <label>date</label>
    {{input value=sightingDate   type="date"  class="form-control"
name="sightedAt" required=true}}
</div>

but only a problem is: when form is loaded, input will display a text (mm/dd/yyyy) not sightedAt value !!!

2

Hi @easa-nahardani, I’d be happy to look into this for you.

I’m having a bit of trouble getting the book’s code running locally due to updates to a lot of dependencies. Could you zip up your project code and post it here so I can get the identical code running locally? To make the file size small, you can move the node_modules and bower_components (if present) folders out of your project folder, then zip up the project, then put node_modules and bower_components back.

3

OK, I was able to reproduce the problem.

What is going on here is that the value of sightedAt is a JavaScript Date object, not a string. An input type="date" expects a string value formatted something like “mm/dd/yyyy” as its value. Because the value it’s given isn’t a string in that format, it considers it blank, and displays the “mm/dd/yyyy” placeholder. Try switching the input to type="text" and you should see something like this outputted: “Tue Nov 10 2020 19:00:00 GMT-0500 (Eastern Standard Time)”

Note that the challenge says “Convert the date to an ISO8601 string using moment and set the sighting property sightingAt with that date string.” I would recommend also using moment to convert the initial Date object to a string and setting that as the input’s initial value. In other words, the model uses a Date and the input uses a string, so you want to do a conversion both (1) when going from model to input and (2) when going from input to model.