Я пытаюсь отформатировать и сохранить даты в Firebase. В настоящее время я использую ReactJS, response-datepicker и moment. js.
У меня есть продукты с датами выпуска. Я хотел бы иметь возможность выбрать дату при публикации нового продукта, сохранить ее в базе данных и иметь возможность упорядочивать по датам все мои продукты позже.
Я начинаю в React и никогда не использовал даты before!
В настоящее время мой компонент выглядит так:
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;
Когда я console.log(this.state.releaseDate), я получаю в консоли следующий формат: Mon Aug 03 2020 17:59:54 GMT+0200 (Central European Summer Time).
Первая проблема: когда я отправляю свою форму, продукт появляется в базе данных, НО нет даты выпуска.
Одна вещь, которую я пробовал, - это добавить .toString () в мою функцию handlePost: releaseDate: this.state.releaseDate. При этом дата сохраняется, но в этом странном формате.
У меня есть 2 вопроса:
- Как я могу отформатировать ее, чтобы я мог, например, иметь "DD-MM- ГГГГ ЧЧ: ММ "? Я могу изменить dateFormat в своем компоненте DatePicker, но console.log по-прежнему имеет тот же формат (например, пятница, 14 августа 2020 г., 18:15:42 GMT + 0200 (Центральноевропейское летнее время))
- Могу ли я еще сортировать мои предметы, если я храню даты в виде строки? Думаю, нет .. Но как тогда я могу правильно хранить даты в firebase? Если я не использую .toString (), при отправке
ничего не сохраняется.