asked on

Date Picker is picky (about something)

This MIGHT be related to https://www.experts-exchange.com/questions/29020595/Different-Javascript-on-iPhone-than-Win-10-desktop.html

I have two programs; as best I can tell they use the SAME datepicker Jquery. One works, one doesn't.

Both have this code in the <head> section

     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

Open in new window

Both have this jQuery:

<script>
  $(function() {
    $( "#datepickerid" ).datepicker();
  });
  $(function() {
    $( "#datepickerdc" ).datepicker();
  });
    $(function() {
    $( "#datepickertd" ).datepicker();
  });
</script>

Open in new window

The one that works has this (this ONE example):

<div class="row">
	<div class="col-sm-1 col-xs-1">&nbsp;</div>
	<div class="col-sm-11 col-xs-11 text-center" style="padding-top:3px;"><span style="padding-right:30px;">Serving/Location:&nbsp;<input type="text" style="width:400px;" name="sloc" value="<? print $_SESSION['sloc']; ?>" ></span>Date Installed:&nbsp;<input type="text" style="width:100px;" name="instdate" id="datepickerid"  value="<? print $_SESSION['instdate']; ?>"><span style="padding-left:30px;">N/A&nbsp;<input type="checkbox" name="dina" <? if ($_SESSION['dina'] == "on") {?>checked<? } ?>>&nbsp;</span></div>
</div>

Open in new window

The one that DOESN'T work has this code:

<div class="row">
                    <div class="col-xs-8"><input type="text" name="instdate" id="datepickerid" style="width:100px;" value="<? print $_SESSION['instdate']; ?>">&nbsp;<input type="checkbox" name="dina" <? if ($_SESSION['dina'] == "on") {?>checked<? } ?>>&nbsp;N/A</div>
                </div>

Open in new window

The one that DOES NOT work worked up until today when I added an id property to 4 other form elements. That was done in accordance with the referenced question. Obviously, I did not use the id "datepickerid" as the id on any other form element.

Any ideas?

Nicholas

Check those newly added ID's are unique

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

or give same class to all

<input name="instdate" id="datepickerid" class="datetimepicker"...>
<input name="hiredate" id="hiredate" class="datetimepicker"...>
<input name="closedate" id="closedate" class="datetimepicker"...>

Open in new window

then just use this

<script>
  $(function() {
    $( ".datetimepicker" ).datepicker();
  });
</script>

Open in new window

it should handle all inputs with class="datetimepicker"

Leonidas Dosas

You can worked with another way without setting different id's in the input elements.Look at the follow code:
I wrap the the first two input elemets in a div with name class=row
I have and another input elemnts wrapped in a div with class name=different_row
At the JQuery row in the selector setting position I add the

$('.row>input')

Open in new window

. That means that I have select all input elements that are inside of an element with class name row.
HTML:

<div class="row">	
<input type="text" style="width:400px;" name="sloc" value="" >
 <input type="text" style="width:100px;" name="instdate" id="datepickerid"  value="">
 <input type="checkbox" name="dina" >&nbsp;
</div>
  
<div class="different_row">
<input type="text" name="instdate" id="datepickerid" style="width:100px;" value="">
<input type="checkbox" name="dina" >
</div>

Open in new window

JQuery:

$(function() {
   $('.row>input').datepicker();
  });

Open in new window