Jquery Datepicker input












1















I add input fields with the same "id" dynamically. But when I focus on input field and select date from datepicker, this value update on first input field element. How can I update value on target input field?



Exampleis here










share|improve this question




















  • 3





    The Id attribute must be unique. You may want to bind using a class instead.

    – devlin carnate
    Nov 14 '18 at 20:02
















1















I add input fields with the same "id" dynamically. But when I focus on input field and select date from datepicker, this value update on first input field element. How can I update value on target input field?



Exampleis here










share|improve this question




















  • 3





    The Id attribute must be unique. You may want to bind using a class instead.

    – devlin carnate
    Nov 14 '18 at 20:02














1












1








1








I add input fields with the same "id" dynamically. But when I focus on input field and select date from datepicker, this value update on first input field element. How can I update value on target input field?



Exampleis here










share|improve this question
















I add input fields with the same "id" dynamically. But when I focus on input field and select date from datepicker, this value update on first input field element. How can I update value on target input field?



Exampleis here







jquery jquery-ui-datepicker






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 20:29







Deep Dive

















asked Nov 14 '18 at 19:55









Deep DiveDeep Dive

104




104








  • 3





    The Id attribute must be unique. You may want to bind using a class instead.

    – devlin carnate
    Nov 14 '18 at 20:02














  • 3





    The Id attribute must be unique. You may want to bind using a class instead.

    – devlin carnate
    Nov 14 '18 at 20:02








3




3





The Id attribute must be unique. You may want to bind using a class instead.

– devlin carnate
Nov 14 '18 at 20:02





The Id attribute must be unique. You may want to bind using a class instead.

– devlin carnate
Nov 14 '18 at 20:02












2 Answers
2






active

oldest

votes


















0














Try this... you want to bind using class.






$(function(){  
$(document).on('focus', '.datepick', function () {
$(this).datepicker({ dateFormat: 'dd.mm.yy' });
});

});

.fields {
margin-top: 20px;
margin-left: 20px;
}

<div class = 'fields'>
<input id="field1" type="text" class="datepick"/>
</div>
<div class = 'fields'>
<input id="field2" type="text" class="datepick"/>
</div>
<div class = 'fields'>
<input id="field3" type="text" class="datepick"/>
</div>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>








share|improve this answer































    0














    There is a number of errors in your HTML. You can't assign an id to more than one element.



    I have edited your HTML and Jquery.



    See working fiddle here.






    share|improve this answer























      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


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307869%2fjquery-datepicker-input%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









      0














      Try this... you want to bind using class.






      $(function(){  
      $(document).on('focus', '.datepick', function () {
      $(this).datepicker({ dateFormat: 'dd.mm.yy' });
      });

      });

      .fields {
      margin-top: 20px;
      margin-left: 20px;
      }

      <div class = 'fields'>
      <input id="field1" type="text" class="datepick"/>
      </div>
      <div class = 'fields'>
      <input id="field2" type="text" class="datepick"/>
      </div>
      <div class = 'fields'>
      <input id="field3" type="text" class="datepick"/>
      </div>

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>








      share|improve this answer




























        0














        Try this... you want to bind using class.






        $(function(){  
        $(document).on('focus', '.datepick', function () {
        $(this).datepicker({ dateFormat: 'dd.mm.yy' });
        });

        });

        .fields {
        margin-top: 20px;
        margin-left: 20px;
        }

        <div class = 'fields'>
        <input id="field1" type="text" class="datepick"/>
        </div>
        <div class = 'fields'>
        <input id="field2" type="text" class="datepick"/>
        </div>
        <div class = 'fields'>
        <input id="field3" type="text" class="datepick"/>
        </div>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>








        share|improve this answer


























          0












          0








          0







          Try this... you want to bind using class.






          $(function(){  
          $(document).on('focus', '.datepick', function () {
          $(this).datepicker({ dateFormat: 'dd.mm.yy' });
          });

          });

          .fields {
          margin-top: 20px;
          margin-left: 20px;
          }

          <div class = 'fields'>
          <input id="field1" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field2" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field3" type="text" class="datepick"/>
          </div>

          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>








          share|improve this answer













          Try this... you want to bind using class.






          $(function(){  
          $(document).on('focus', '.datepick', function () {
          $(this).datepicker({ dateFormat: 'dd.mm.yy' });
          });

          });

          .fields {
          margin-top: 20px;
          margin-left: 20px;
          }

          <div class = 'fields'>
          <input id="field1" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field2" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field3" type="text" class="datepick"/>
          </div>

          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>








          $(function(){  
          $(document).on('focus', '.datepick', function () {
          $(this).datepicker({ dateFormat: 'dd.mm.yy' });
          });

          });

          .fields {
          margin-top: 20px;
          margin-left: 20px;
          }

          <div class = 'fields'>
          <input id="field1" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field2" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field3" type="text" class="datepick"/>
          </div>

          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>





          $(function(){  
          $(document).on('focus', '.datepick', function () {
          $(this).datepicker({ dateFormat: 'dd.mm.yy' });
          });

          });

          .fields {
          margin-top: 20px;
          margin-left: 20px;
          }

          <div class = 'fields'>
          <input id="field1" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field2" type="text" class="datepick"/>
          </div>
          <div class = 'fields'>
          <input id="field3" type="text" class="datepick"/>
          </div>

          <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
          <link rel="stylesheet" href="/resources/demos/style.css">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 15 '18 at 3:22









          Sooriya DasanayakeSooriya Dasanayake

          9021411




          9021411

























              0














              There is a number of errors in your HTML. You can't assign an id to more than one element.



              I have edited your HTML and Jquery.



              See working fiddle here.






              share|improve this answer




























                0














                There is a number of errors in your HTML. You can't assign an id to more than one element.



                I have edited your HTML and Jquery.



                See working fiddle here.






                share|improve this answer


























                  0












                  0








                  0







                  There is a number of errors in your HTML. You can't assign an id to more than one element.



                  I have edited your HTML and Jquery.



                  See working fiddle here.






                  share|improve this answer













                  There is a number of errors in your HTML. You can't assign an id to more than one element.



                  I have edited your HTML and Jquery.



                  See working fiddle here.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 15 '18 at 5:57









                  Muddasir23Muddasir23

                  1249




                  1249






























                      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














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307869%2fjquery-datepicker-input%23new-answer', 'question_page');
                      }
                      );

                      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







                      Popular posts from this blog

                      Florida Star v. B. J. F.

                      Danny Elfman

                      Retrieve a Users Dashboard in Tumblr with R and TumblR. Oauth Issues