Mixing
defaultValue is not working in react DatePicker
I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console.
console error
class EditEvent extends React.Component{
EventUpdate(e){
e.preventDefault();
let eventDate = e.target.date.value;
let myId = this.props.match.params.id;
Events.update(
{_id : myId},
{date: eventDate,},
function(err) {
if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
else{$('.upload-event-from').trigger("reset");}
}
);
}
constructor(props) {
super(props);
this.state = {startDate: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render(){
const {
loading,
updateData,
} = this.props;
return loading ? null : (
<div>
<PrivateHeader title="Discover Page"/>
<form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
<div className="form-group fg-icon">
<DatePicker
defaultValue={updateData.date}
className="form-control"
id="event_date_time"
name="date"
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat=""
timeCaption="time"
autocomplete="off"
/>
</div>
<center>
<button type="submit" className="btn app-btn">Update</button>
</center>
</form>
<PrivateFooter title="Events Page"/>
</div>
);
}
}
export default withTracker((props) => {
const subscription = Meteor.subscribe('allowedData'); //Dat
const handle = props.match.params.id;
return {
loading: !subscription.ready(),
updateData: Events.findOne({_id:handle}),
};
})(EditEvent);
javascript reactjs meteor components react-datepicker
asked Nov 20 '18 at 9:40
KaneKane
407
add a comment |
I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console.
console error
class EditEvent extends React.Component{
EventUpdate(e){
e.preventDefault();
let eventDate = e.target.date.value;
let myId = this.props.match.params.id;
Events.update(
{_id : myId},
{date: eventDate,},
function(err) {
if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
else{$('.upload-event-from').trigger("reset");}
}
);
}
constructor(props) {
super(props);
this.state = {startDate: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render(){
const {
loading,
updateData,
} = this.props;
return loading ? null : (
<div>
<PrivateHeader title="Discover Page"/>
<form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
<div className="form-group fg-icon">
<DatePicker
defaultValue={updateData.date}
className="form-control"
id="event_date_time"
name="date"
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat=""
timeCaption="time"
autocomplete="off"
/>
</div>
<center>
<button type="submit" className="btn app-btn">Update</button>
</center>
</form>
<PrivateFooter title="Events Page"/>
</div>
);
}
}
export default withTracker((props) => {
const subscription = Meteor.subscribe('allowedData'); //Dat
const handle = props.match.params.id;
return {
loading: !subscription.ready(),
updateData: Events.findOne({_id:handle}),
};
})(EditEvent);
javascript reactjs meteor components react-datepicker
asked Nov 20 '18 at 9:40
KaneKane
407
add a comment |
I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console.
console error
class EditEvent extends React.Component{
EventUpdate(e){
e.preventDefault();
let eventDate = e.target.date.value;
let myId = this.props.match.params.id;
Events.update(
{_id : myId},
{date: eventDate,},
function(err) {
if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
else{$('.upload-event-from').trigger("reset");}
}
);
}
constructor(props) {
super(props);
this.state = {startDate: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render(){
const {
loading,
updateData,
} = this.props;
return loading ? null : (
<div>
<PrivateHeader title="Discover Page"/>
<form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
<div className="form-group fg-icon">
<DatePicker
defaultValue={updateData.date}
className="form-control"
id="event_date_time"
name="date"
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat=""
timeCaption="time"
autocomplete="off"
/>
</div>
<center>
<button type="submit" className="btn app-btn">Update</button>
</center>
</form>
<PrivateFooter title="Events Page"/>
</div>
);
}
}
export default withTracker((props) => {
const subscription = Meteor.subscribe('allowedData'); //Dat
const handle = props.match.params.id;
return {
loading: !subscription.ready(),
updateData: Events.findOne({_id:handle}),
};
})(EditEvent);
javascript reactjs meteor components react-datepicker
asked Nov 20 '18 at 9:40
KaneKane
407
I have used react-datepicker. I have faced some problem. defaultValue={updateData.date} is not working. It's not showing data. If use value="{updateData.date}" then showing data but its cant edit. How can I solve this? Also, have another problem If I have used placeholderText its showing and working properly but showing an error in the console.
console error
class EditEvent extends React.Component{
EventUpdate(e){
e.preventDefault();
let eventDate = e.target.date.value;
let myId = this.props.match.params.id;
Events.update(
{_id : myId},
{date: eventDate,},
function(err) {
if (err){("#message").removeClass("alert-success").addClass("alert-danger").text(err.reason);}
else{$('.upload-event-from').trigger("reset");}
}
);
}
constructor(props) {
super(props);
this.state = {startDate: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
startDate: date
});
}
render(){
const {
loading,
updateData,
} = this.props;
return loading ? null : (
<div>
<PrivateHeader title="Discover Page"/>
<form className="upload-event-from plr-15" onSubmit={this.EventUpdate.bind(this)}>
<div className="form-group fg-icon">
<DatePicker
defaultValue={updateData.date}
className="form-control"
id="event_date_time"
name="date"
selected={this.state.startDate}
onChange={this.handleChange}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat=""
timeCaption="time"
autocomplete="off"
/>
</div>
<center>
<button type="submit" className="btn app-btn">Update</button>
</center>
</form>
<PrivateFooter title="Events Page"/>
</div>
);
}
}
export default withTracker((props) => {
const subscription = Meteor.subscribe('allowedData'); //Dat
const handle = props.match.params.id;
return {
loading: !subscription.ready(),
updateData: Events.findOne({_id:handle}),
};
})(EditEvent);
javascript reactjs meteor components react-datepicker
javascript reactjs meteor components react-datepicker
asked Nov 20 '18 at 9:40
KaneKane
407
asked Nov 20 '18 at 9:40
KaneKane
407
asked Nov 20 '18 at 9:40
KaneKane
407
asked Nov 20 '18 at 9:40
KaneKane
407
asked Nov 20 '18 at 9:40
KaneKane
407
407
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this
this.state = {startDate: new Date()};
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390102%2fdefaultvalue-is-not-working-in-react-datepicker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this
this.state = {startDate: new Date()};
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
add a comment |
As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this
this.state = {startDate: new Date()};
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
add a comment |
As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this
this.state = {startDate: new Date()};
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
As per documentation and your console.log selected prop needs to be instanceOf(Date) rather then string, try initializing it like this
this.state = {startDate: new Date()};
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
answered Nov 20 '18 at 9:54
Igor SłomskiIgor Słomski
215
215
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390102%2fdefaultvalue-is-not-working-in-react-datepicker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
