The specified value "2018-04-01T00:00:00.000Z" does not conform to the required format, "yyyy-MM-dd"

[TurtleWolfe]

The specified value "2018-04-01T00:00:00.000Z" does not conform to the required format, "yyyy-MM-dd"

When I 'prefill' the dates, I need to change the format of the date. Not sure where to hook this in at. I'm sure I need a function to reformat it, but I'm not sure where to place it at.. I know it's getting the date object from MongoDB.. I can 'input' it in the 'preferred' format & it'll still change when it's saved in MongoDB. I do not know if this date picker is coming from JQuery or HTML5 or if that would even affect it.
https://github.com/TurtleWolf/Food_Liberation_Front
https://food-liberation-front.herokuapp.com

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class EditBarrel extends Component {
    constructor(props){
        super(props);
        this.state = {
            id:'',
            Name:'',
            barrel_number:'',
            date_planted:'',
            size:'',
            contents:'',
            location:'',
            date_last_checked:'',
            notes:''
        }
 this.handleInputChange = this.handleInputChange.bind(this);
    }

    componentWillMount(){
        this.getBarrelDetails();
    }

    getBarrelDetails(){
    let barrelID = this.props.match.params.id;
    axios.get(`/api/Barrels/${barrelID}`)
    .then (response => {
      this.setState({
            id:response.data.id,
            Name:response.data.Name,
            barrel_number:response.data.barrel_number,
            date_planted:response.data.date_planted,
            size:response.data.size,
            contents:response.data.contents,
            location:response.data.location,
            date_last_checked:response.data.date_last_checked,
            notes:response.data.notes
      }, () =>  {
        console.log(this.state);
      });
    })
    .catch(err => console.log(err));
  }

    editBarrel(newBarrel){
        //let barrelID = this.props.match.params.id;
        //console.log(newBarrel);
        axios.request({
            method:'put',
            url:`/api/barrels/${this.state.id}`,
            data: newBarrel
        }).then(response => {
            this.props.history.push('/');
        }).catch( err => console.log(err));
    }

    onSubmit(e){
        const newBarrel = {
            //id: this.refs.id.value,
            Name: this.refs.Name.value,
            barrel_number: this.refs.barrel_number.value,
            contents: this.refs.contents.value,
            date_last_checked: this.refs.date_last_checked.value,
            date_planted: this.refs.date_planted.value,
            location: this.refs.location.value,
            size: this.refs.size.value,
            notes: this.refs.notes.value
        }
        this.editBarrel(newBarrel);
        e.preventDefault();
    }

    handleInputChange (e){
        //const target = e.target;
        const value = e.target.value;
        const key = e.target.name;

        this.setState({
            [key]: value
        });

    }

    render () {
    return (
            <div className = "container green lighten-3" >
            <br />
            <Link className = "btn grey" to = "/">back</Link>
            <h6>Edit this Barrel</h6>
            <form onSubmit = {this.onSubmit.bind(this)}>
                <div className = "input-field" >
                    <input type = "text" name = "Name" ref = "Name" value = {this.state.Name} onChange = {this.handleInputChange} />
                    <label htmlFor = "Name" >Name</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "barrel_number" ref = "barrel_number"  value = {this.state.barrel_number} onChange = {this.handleInputChange} />
                    <label htmlFor = "barrel_number" >barrel number</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "contents" ref = "contents"  value = {this.state.contents} onChange = {this.handleInputChange} />
                    <label htmlFor = "contents" >contents</label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_planted" ref = "date_planted" value = {this.state.date_planted} onChange = {this.handleInputChange} />
                    <label htmlFor = "date_planted" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "date" name = "date_last_checked" ref = "date_last_checked"  value = {this.state.date_last_checked} onChange = {this.handleInputChange} />
                    <label htmlFor = "date_last_checked" ></label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "location" ref = "location" value = {this.state.location} onChange = {this.handleInputChange} />
                    <label htmlFor = "location" >location</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "size" ref = "size"  value = {this.state.size} onChange = {this.handleInputChange} />
                    <label htmlFor = "size" >size</label>
                </div>
                <div className = "input-field" >
                    <input type = "text" name = "notes" ref = "notes" value = {this.state.notes} onChange = {this.handleInputChange} />
                    <label htmlFor = "notes" >notes</label>
                </div>                

                <input type = "submit" value = "Save" className = "btn" />
            </form>
            </div>
           )
}
}

export default EditBarrel;

[TurtleWolfe]

after trying to formulate my question for stack overflow, the top 'pre-suggested' answer suggests a conflict in the html5 date picker, that might be eased with jquery's date picker UI. The tutorial originally suggested loading jquery anyways & I remember a comment asking if it wouldn't conflict with React. I'm hoping just using the date picker will help. The original tutorial did not cover displaying a date to be edited.. https://stackoverflow.com/questions/30798906/the-specified-value-does-not-conform-to-the-required-format-yyyy-mm-dd

[TurtleWolfe]

The specified value "2018-04-01T00:00:00.000Z" does not conform to the required format, "yyyy-MM-dd"

I found where to format the date for Materialize in the initiation options, but now my date picker disappears.

    <script>
        $(document).ready(() => {
          $(".button-collapse").sideNav();
          $('.datepicker').datepicker('yyyy-MM-dd');
        });
      </script>

.. since they both call className .datepicker, I wonder if Materialize & JQuery are causing a conflict

<div className = "input-field" >
<input type="date" class="datepicker" date = {this.state.date_planted} name = "date_planted" ref = "date_planted" value = {this.state.date_planted} onChange = {this.handleInputChange} />
                    <label htmlFor = "date_planted" ></label>
</div>
<div className = "input-field" >
<input type="text" className="datepicker" date = {this.state.date_last_checked} name = "date_last_checked" ref = "date_last_checked"  value = {this.state.date_last_checked} onChange = {this.handleInputChange} />
                    <label htmlFor = "date_last_checked" ></label>
</div>

If I change input type to text, it prefills with the correct date, but my datepicker is unavailable. If I leave the input type as date, then it prefills to "mm/dd/yyyy" like it has no info to reference.

https://github.com/TurtleWolf/Food_Liberation_Front
https://food-liberation-front.herokuapp.com

[TurtleWolfe]

reformulating my question.. or maybe a new one. It's actually giving me the date picker, as long as I reload the page. I think it's a classic case of the page ready firing before the SPA is finished loading

https://stackoverflow.com/questions/49602120/the-specified-value-does-not-conform-to-the-required-format-or-my-date-picker-be