js-datepicker mutiple inputs with the same classHow to change an element's class with JavaScript?How can I select an element with multiple classes in jQuery?Disable/enable an input with jQuery?Disable same origin policy in ChromeJQueryUI DatePicker replacing invalid input with minDateExtending jQuery UI components ( Overriding jQuery Datepicker to prevent wrong input)UI-Bootstrap datepicker with input maskAngular 2 with javascript and datepickerDon't display datepicker popup in mobile devices for input type=dateJquery UI datepicker add “Unknown” option value to input
How can we prove that any integral in the set of non-elementary integrals cannot be expressed in the form of elementary functions?
Method to test if a number is a perfect power?
Class Action - which options I have?
Pre-amplifier input protection
Do the temporary hit points from the Battlerager barbarian's Reckless Abandon stack if I make multiple attacks on my turn?
Hostile work environment after whistle-blowing on coworker and our boss. What do I do?
What is the opposite of 'gravitas'?
How did Doctor Strange see the winning outcome in Avengers: Infinity War?
I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?
Did Dumbledore lie to Harry about how long he had James Potter's invisibility cloak when he was examining it? If so, why?
Is expanding the research of a group into machine learning as a PhD student risky?
How does it work when somebody invests in my business?
Would a virus be able to change eye and hair colour?
What can we do to stop prior company from asking us questions?
How do I find the solutions of the following equation?
Short story about space worker geeks who zone out by 'listening' to radiation from stars
System.debug(JSON.Serialize(o)) Not longer shows full string
Increase performance creating Mandelbrot set in python
How can I get through very long and very dry, but also very useful technical documents when learning a new tool?
How easy is it to start Magic from scratch?
Purchasing a ticket for someone else in another country?
Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?
How did Arya survive the stabbing?
How does the UK government determine the size of a mandate?
js-datepicker mutiple inputs with the same class
How to change an element's class with JavaScript?How can I select an element with multiple classes in jQuery?Disable/enable an input with jQuery?Disable same origin policy in ChromeJQueryUI DatePicker replacing invalid input with minDateExtending jQuery UI components ( Overriding jQuery Datepicker to prevent wrong input)UI-Bootstrap datepicker with input maskAngular 2 with javascript and datepickerDon't display datepicker popup in mobile devices for input type=dateJquery UI datepicker add “Unknown” option value to input
I'm using this js-datepicker plugin (https://www.npmjs.com/package/js-datepicker). The problem is I have a lot of fields I want to apply the same type of date picker so presumed I could just give them all a class of say 'year', however it only assigns it to the first input field with that class. Is there a way to apply to all inputs with that class?
my code:
const year = datepicker('.year',
/* formatter: (input, date, instance) =>
const value = date.toLocaleDateString()
input.value = value // => '1/1/2099'
*/
);
javascript npm jsdatepick
asked Mar 8 at 11:22
karlkarl
467
add a comment |
I'm using this js-datepicker plugin (https://www.npmjs.com/package/js-datepicker). The problem is I have a lot of fields I want to apply the same type of date picker so presumed I could just give them all a class of say 'year', however it only assigns it to the first input field with that class. Is there a way to apply to all inputs with that class?
my code:
const year = datepicker('.year',
/* formatter: (input, date, instance) =>
const value = date.toLocaleDateString()
input.value = value // => '1/1/2099'
*/
);
javascript npm jsdatepick
asked Mar 8 at 11:22
karlkarl
467
1
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29
add a comment |
I'm using this js-datepicker plugin (https://www.npmjs.com/package/js-datepicker). The problem is I have a lot of fields I want to apply the same type of date picker so presumed I could just give them all a class of say 'year', however it only assigns it to the first input field with that class. Is there a way to apply to all inputs with that class?
my code:
const year = datepicker('.year',
/* formatter: (input, date, instance) =>
const value = date.toLocaleDateString()
input.value = value // => '1/1/2099'
*/
);
javascript npm jsdatepick
asked Mar 8 at 11:22
karlkarl
467
I'm using this js-datepicker plugin (https://www.npmjs.com/package/js-datepicker). The problem is I have a lot of fields I want to apply the same type of date picker so presumed I could just give them all a class of say 'year', however it only assigns it to the first input field with that class. Is there a way to apply to all inputs with that class?
my code:
const year = datepicker('.year',
/* formatter: (input, date, instance) =>
const value = date.toLocaleDateString()
input.value = value // => '1/1/2099'
*/
);
javascript npm jsdatepick
javascript npm jsdatepick
asked Mar 8 at 11:22
karlkarl
467
asked Mar 8 at 11:22
karlkarl
467
asked Mar 8 at 11:22
karlkarl
467
asked Mar 8 at 11:22
karlkarl
467
asked Mar 8 at 11:22
karlkarl
467
467
1
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29
add a comment |
1
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29
1
1
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29
add a comment |
2 Answers
2
active
oldest
votes
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
Basically something simple like this should do,
var fields = document.querySelectorAll('.year');
fields.forEach(function(e)
datepicker(e, )
);
If you need the references to the datepicker instances to be able to modify options later on or something like that, you could add them to an array inside the loop.
answered Mar 8 at 11:32
04FS04FS
1,3241314
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
add a comment |
Maybe you can simply use input type "date" to have a quick working solution.
Advantage: Format is chosen based on the current settings of the user, no need to format anything.
<input type="date" value="2019-01-01">answered Mar 8 at 11:30
AaronAaron
13
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
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%2f55062216%2fjs-datepicker-mutiple-inputs-with-the-same-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
Basically something simple like this should do,
var fields = document.querySelectorAll('.year');
fields.forEach(function(e)
datepicker(e, )
);
If you need the references to the datepicker instances to be able to modify options later on or something like that, you could add them to an array inside the loop.
answered Mar 8 at 11:32
04FS04FS
1,3241314
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
add a comment |
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
Basically something simple like this should do,
var fields = document.querySelectorAll('.year');
fields.forEach(function(e)
datepicker(e, )
);
If you need the references to the datepicker instances to be able to modify options later on or something like that, you could add them to an array inside the loop.
answered Mar 8 at 11:32
04FS04FS
1,3241314
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
add a comment |
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
Basically something simple like this should do,
var fields = document.querySelectorAll('.year');
fields.forEach(function(e)
datepicker(e, )
);
If you need the references to the datepicker instances to be able to modify options later on or something like that, you could add them to an array inside the loop.
answered Mar 8 at 11:32
04FS04FS
1,3241314
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
Basically something simple like this should do,
var fields = document.querySelectorAll('.year');
fields.forEach(function(e)
datepicker(e, )
);
If you need the references to the datepicker instances to be able to modify options later on or something like that, you could add them to an array inside the loop.
answered Mar 8 at 11:32
04FS04FS
1,3241314
answered Mar 8 at 11:32
04FS04FS
1,3241314
answered Mar 8 at 11:32
04FS04FS
1,3241314
answered Mar 8 at 11:32
04FS04FS
1,3241314
1,3241314
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
add a comment |
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
awesome, looks like the best solution cheers!
– karl
Mar 8 at 12:12
add a comment |
Maybe you can simply use input type "date" to have a quick working solution.
Advantage: Format is chosen based on the current settings of the user, no need to format anything.
<input type="date" value="2019-01-01">answered Mar 8 at 11:30
AaronAaron
13
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
add a comment |
Maybe you can simply use input type "date" to have a quick working solution.
Advantage: Format is chosen based on the current settings of the user, no need to format anything.
<input type="date" value="2019-01-01">answered Mar 8 at 11:30
AaronAaron
13
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
add a comment |
Maybe you can simply use input type "date" to have a quick working solution.
Advantage: Format is chosen based on the current settings of the user, no need to format anything.
<input type="date" value="2019-01-01">answered Mar 8 at 11:30
AaronAaron
13
Maybe you can simply use input type "date" to have a quick working solution.
Advantage: Format is chosen based on the current settings of the user, no need to format anything.
<input type="date" value="2019-01-01"><input type="date" value="2019-01-01"><input type="date" value="2019-01-01">answered Mar 8 at 11:30
AaronAaron
13
answered Mar 8 at 11:30
AaronAaron
13
answered Mar 8 at 11:30
AaronAaron
13
answered Mar 8 at 11:30
AaronAaron
13
13
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
add a comment |
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
Hi Aaron, yes this is how I first wanted to do it but unfortunately there's no way of customising the output, it has to go into a specific date format which is likely different to the browser preference.
– karl
Mar 8 at 12:14
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%2f55062216%2fjs-datepicker-mutiple-inputs-with-the-same-class%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
1
Looks like this wants to initialize for one element at a time only, so you will need to select all your .year elements and loop over them, and then call the datepicker function for each one individually.
– 04FS
Mar 8 at 11:29
They would all be assigned to same const variable, that's why it is appended only to the first element. You'd have to create an array of const and possibly differentiate the DOM elements by something more specific like an id value
– Davide Vitali
Mar 8 at 11:29