React-select show date on selected
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am using react-select, i need to show date based on the selected value, following are the option i am using.
const dueOptions = [
{
value : 1,
label : "Today"
},{
value : 15,
label : "After 15 days"
},{
value : 30,
label : "After 30 days"
},{
value : 31,
label : "Custom"
}
];
reactjs react-select
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
add a comment |
0
I am using react-select, i need to show date based on the selected value, following are the option i am using.
const dueOptions = [
{
value : 1,
label : "Today"
},{
value : 15,
label : "After 15 days"
},{
value : 30,
label : "After 30 days"
},{
value : 31,
label : "Custom"
}
];
reactjs react-select
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
1
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12
add a comment |
0
0
0
I am using react-select, i need to show date based on the selected value, following are the option i am using.
const dueOptions = [
{
value : 1,
label : "Today"
},{
value : 15,
label : "After 15 days"
},{
value : 30,
label : "After 30 days"
},{
value : 31,
label : "Custom"
}
];
reactjs react-select
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
I am using react-select, i need to show date based on the selected value, following are the option i am using.
const dueOptions = [
{
value : 1,
label : "Today"
},{
value : 15,
label : "After 15 days"
},{
value : 30,
label : "After 30 days"
},{
value : 31,
label : "Custom"
}
];
reactjs react-select
reactjs react-select
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
asked Nov 29 '18 at 5:22
SelvarajSelvaraj
6313
6313
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
1
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12
add a comment |
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
1
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
1
1
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12
add a comment |
1 Answer
1
active
oldest
votes
0
You can easily do it creating a state in component and using Moment js
state={
selected_date:""
}
And then updating the state every time on change of react-select using a similar functionality like onChange
Here's the function
showDate = (selectedValue) => {
var toDay = moment(new Date()).format("DD/MM/YYYY")
var newDate = moment(toDay, "DD-MM-YYYY").add(selectedValue, 'days');
this.setState({
selectedDate:newDate
});
}
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
1
I think yes according to their documentation just update there stateselected_optionby appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage
– Goldy
Nov 29 '18 at 6:38
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
});
}
});
draft saved
draft discarded
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%2f53532359%2freact-select-show-date-on-selected%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
0
You can easily do it creating a state in component and using Moment js
state={
selected_date:""
}
And then updating the state every time on change of react-select using a similar functionality like onChange
Here's the function
showDate = (selectedValue) => {
var toDay = moment(new Date()).format("DD/MM/YYYY")
var newDate = moment(toDay, "DD-MM-YYYY").add(selectedValue, 'days');
this.setState({
selectedDate:newDate
});
}
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
1
I think yes according to their documentation just update there stateselected_optionby appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage
– Goldy
Nov 29 '18 at 6:38
add a comment |
0
You can easily do it creating a state in component and using Moment js
state={
selected_date:""
}
And then updating the state every time on change of react-select using a similar functionality like onChange
Here's the function
showDate = (selectedValue) => {
var toDay = moment(new Date()).format("DD/MM/YYYY")
var newDate = moment(toDay, "DD-MM-YYYY").add(selectedValue, 'days');
this.setState({
selectedDate:newDate
});
}
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
1
I think yes according to their documentation just update there stateselected_optionby appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage
– Goldy
Nov 29 '18 at 6:38
add a comment |
0
0
0
You can easily do it creating a state in component and using Moment js
state={
selected_date:""
}
And then updating the state every time on change of react-select using a similar functionality like onChange
Here's the function
showDate = (selectedValue) => {
var toDay = moment(new Date()).format("DD/MM/YYYY")
var newDate = moment(toDay, "DD-MM-YYYY").add(selectedValue, 'days');
this.setState({
selectedDate:newDate
});
}
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
You can easily do it creating a state in component and using Moment js
state={
selected_date:""
}
And then updating the state every time on change of react-select using a similar functionality like onChange
Here's the function
showDate = (selectedValue) => {
var toDay = moment(new Date()).format("DD/MM/YYYY")
var newDate = moment(toDay, "DD-MM-YYYY").add(selectedValue, 'days');
this.setState({
selectedDate:newDate
});
}
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
answered Nov 29 '18 at 6:22
GoldyGoldy
372415
372415
1
I think yes according to their documentation just update there stateselected_optionby appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage
– Goldy
Nov 29 '18 at 6:38
add a comment |
1
I think yes according to their documentation just update there stateselected_optionby appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage
– Goldy
Nov 29 '18 at 6:38
1
1
I think yes according to their documentation just update there state
selected_option by appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage– Goldy
Nov 29 '18 at 6:38
I think yes according to their documentation just update there state
selected_option by appending the date calculated from the function I have given. Link to documentation npmjs.com/package/react-select#installation-and-usage– Goldy
Nov 29 '18 at 6:38
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53532359%2freact-select-show-date-on-selected%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
i don't think you can do with the react-select you can check out lots of example of all here jedwatson.github.io/react-select and for the date select you can use any date picker.
– Harsh Shah
Nov 29 '18 at 5:40
1
How about showing dates in bracket?
– Just code
Nov 29 '18 at 5:42
I would suggest putting the date outside the Select component somewhere
– Shawn Andrews
Nov 29 '18 at 5:50
Thats exactly how React-Select v2 "date picker" works (experimental section). Just no need for calendar - react-select.com/advanced
– Julius Dzidzevičius
Nov 29 '18 at 5:52
Yes, i have seen it but its complicated to analyze, just i need to show date, can you provide some simple example as a hint, @juscode yes please provide some example
– Selvaraj
Nov 29 '18 at 6:12