I'm trying to format and store dates in Firebase. Currently, i'm using ReactJS, react-datepicker and moment.js.
I have products that have release dates. I'd like to be able to select a date when posting a new product, store it in the database and be able to order by dates all my products later.
I'm beginning in React and never used dates before!
Currently, my component looks like this :
import React, { Component } from 'react';
import Popup from './Popup';
import actions from '../../actions';
import DatePicker, { registerLocale, setDefaultLocale } from 'react-datepicker';
import * as moment from 'moment';
import 'moment/locale/fr';
import fr from 'date-fns/locale/fr';
registerLocale('fr', fr);
import 'react-datepicker/dist/react-datepicker.css';
class PostPopup extends Component {
constructor() {
super();
this.state = {
isRaffle: false,
brands: '',
sellers: [],
releaseDate: new Date(),
};
this.handleCheck = this.handleCheck.bind(this);
this.handleSelect = this.handleSelect.bind(this);
this.handleSellers = this.handleSellers.bind(this);
this.handleReleaseDate = this.handleReleaseDate.bind(this);
}
handleReleaseDate = (date) => {
this.setState({
releaseDate: date,
});
};
handlePost = () => {
const newProduct = {
name: this.refs.productName.value,
tagline: this.refs.productTagline.value,
releaseDate: this.state.releaseDate,
isRaffle: this.refs.checkRaffle.checked,
productDescription: this.refs.productDescription.value,
thumbnail: this.refs.productThumbnail.value,
media: this.refs.productMedia.value,
upvote: 0,
brands: this.state.brands,
sellers: this.state.sellers,
publisher: {
name: this.props.user.name,
avatar: this.props.user.avatar,
},
};
actions.addProduct(newProduct);
};
handleCheck = (event) => {
const target = event.target;
const value = target.value;
if (target.checked) {
this.setState({ isRaffle: true });
} else {
this.setState({ isRaffle: false });
}
};
handleSelect = (e) => {
this.setState({ brands: e.target.value });
};
handleSellers = (e) => {
const target = e.target;
var value = target.value;
if (target.checked) {
this.state.sellers[value] = true;
this.setState({ state: this.state });
} else {
this.state.sellers[value] = false;
// this.state.sellers.splice(value, 1);
// this.state.sellers.every(seller => Object.key)
this.setState({ state: this.state });
}
};
render() {
var message = 'You selected ' + this.state.brands;
// console.log(this.state.isRaffle);
// console.log(this.state.brands);
// console.log(this.state.sellers);
return (
<Popup {...this.props} style="post-popup">
<header>Mettre un produit en ligne</header>
<section className="post-popup_content">
<form>
<div className="form-row">
<div className="form-group col-md-6">
<label htmlFor="inputName">Nom du produit</label>
<input
type="productName"
ref="productName"
className="form-control"
id="inputName"
aria-describedby="inputName"
placeholder="Entrez le nom du produit.."
maxLength="40"
></input>
<small id="emailHelp" className="form-text text-muted">
40 caractères maximum
</small>
</div>
<div className="from-group col-md-6">
<label htmlFor="productBrands">Marque du produit</label>
<select
className="form-control"
ref="productBrands"
id="productBrands"
value={this.state.brands}
onChange={this.handleSelect}
>
<option value="">Sélectionner...</option>
<option value="Nike">Nike</option>
<option value="Puma">Puma</option>
</select>
<p>{message}</p>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<label htmlFor="inputReleaseDate">Date de sortie du produit</label>
<DatePicker
selected={this.state.releaseDate}
onChange={this.handleReleaseDate}
name="releaseDate"
locale="fr"
dateFormat="dd/MM/yyyy"
defaultValue={this.state.releaseDate}
/>
<button className="btn btn-primary">Date</button>
{console.log(this.state.releaseDate)}
</div>
<div className="form-check col-md-6 pl-5">
<input
className="form-check-input"
type="checkbox"
value=""
id="checkRaffle"
ref="checkRaffle"
onChange={this.handleCheck}
></input>
<label className="form-check-label" htmlFor="checkRaffle">
Sortie en RAFFLE
</label>
</div>
</div>
<div className="form-group">
<label htmlFor="inputTagline">Tagline du produit</label>
<input
type="productTagline"
ref="productTagline"
className="form-control"
id="inputTagline"
aria-describedby="inputTagline"
placeholder="Tagline du produit"
maxLength="60"
></input>
<small id="emailHelp" className="form-text text-muted">
60 caractères maximum
</small>
</div>
<div className="form-group">
<label htmlFor="inputDescription">Description du produit</label>
<input
type="productDescription"
ref="productDescription"
className="form-control"
id="inputDescription"
aria-describedby="inputDescription"
placeholder="Description du produit"
maxLength="260"
></input>
<small id="emailHelp" className="form-text text-muted">
260 caractères maximum
</small>
</div>
<div className="form-group">
<label htmlFor="inputThumbnail">Thumbnail produit</label>
<input
type="productThumbnail"
ref="productThumbnail"
className="form-control"
id="inputThumbnail"
aria-describedby="inputThumbnail"
placeholder="Lien vers l'image (https://www...)"
></input>
</div>
<div className="form-group">
<label htmlFor="inputMedia">Image produit</label>
<input
type="productMedia"
ref="productMedia"
className="form-control"
id="inputMedia"
aria-describedby="inputMedia"
placeholder="Lien vers l'image (https://www...)"
></input>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<label>Vendeurs :</label>
<br />
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="checkbox"
name="sellers"
id="sellerCheckbox1"
value="Nike"
onChange={this.handleSellers}
/>
<label className="form-check-label" htmlFor="sellerCheckbox1">
Nike
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="checkbox"
name="sellers"
id="sellerCheckbox2"
value="Opium Paris"
onChange={this.handleSellers}
/>
<label className="form-check-label" htmlFor="sellerCheckbox2">
Opium Paris
</label>
</div>
<div className="form-check form-check-inline">
<input
className="form-check-input"
type="checkbox"
name="sellers"
id="sellerCheckbox3"
value="Puma"
onChange={this.handleSellers}
/>
<label className="form-check-label" htmlFor="sellerCheckbox3">
Puma
</label>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary" onClick={this.handlePost}>
Envoyer
</button>
</form>
</section>
</Popup>
);
}
}
export default PostPopup;
When i console.log(this.state.releaseDate), i get the following format in the console : Mon Aug 03 2020 17:59:54 GMT+0200 (Central European Summer Time).
First issue : when i submit my form, the product appears in the database BUT there's no releaseDate.
One thing i've tried is adding .toString() like this in my handlePost function : releaseDate: this.state.releaseDate. Doing so, the date is stored but in this weird format.
I have 2 questions here :
- How can i format it so i can have for example "DD-MM-YYYY HH:MM" ? I can change dateFormat on my DatePicker component, but the console.log still have the same format (ex : Fri Aug 14 2020 18:15:42 GMT+0200 (Central European Summer Time))
- Can i still sort my items if i store dates as a string? My guess is no.. But how can i store dates correctly in firebase then? If i don't use .toString(), nothing is stored when i submit
