Question

Does anyone have any experience positioning the jquery.datepicker found at http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html

Functionality-wise it works perfectly, doing exactly what I want it to. However, I’m using it for a search function, and need multiple fields in order to search for dates, and other things. My issue is that every input box set to the datepicker, the next element automatically gets put onto a new line. For my usage, I’d like to keep all input boxes on the same page. Any ideas why? I’ve looked through the CSS and can’t figure it out. Any help would be much appreciated.

The CSS for the datePicker has been left unchanged, so what you are using (or see from the included link is what I am referencing). In terms of my code, I’m using a template called Simpla Admin, and while I’ve perused through it for a deeply nestled clear:both, it is entirely possible that I have missed it. I am indeed using Firebug to check the CSS settings, and nothing is standing out for me.

<div class="clear"></div>

        <?php
        } else {
            echo '<p><h3>No patients found.</h3></p>';
        }
        }
        ?>
        <br><br>
        <form name="searchForm" id="searchForm" action="#">
            First: <input name="firstName" id="firstName" style="width:80px" class="text-input" />
            Last: <input name="lastName" id="lastName" style="width:80px" class="text-input" />
            DOB: 
            <select name="dobMonth" style="width:70px" id="dobMonth">
              <option value ="">Month</option>
              <option value ="01">January</option>
              <option value ="02">February</option>
              <option value ="03">March</option>
              <option value ="04">April</option>
              <option value ="05">May</option>
              <option value ="06">June</option>
              <option value ="07">July</option>
              <option value ="08">August</option>
              <option value ="09">September</option>
              <option value ="10">October</option>
              <option value ="11">November</option>
              <option value ="12">December</option>
            </select>
            <select name="dobDay" style="width:60px" id="dobDay">
                <option value="">Day</option>
                <?php $days = GetDaysInMonth(); 
                $DaysInNumbers = array ('', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31');
                for ($i = 1; $i <= $days; $i++) : ?>
                <option value="<?php echo $DaysInNumbers[$i]; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <select name="dobYear" style="width:60px" id="dobYear">
                <option value="">Year</option>
                <?php for ($i = 1920; $i < date('Y'); $i++) : ?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            Date: <input name="bookingDate" id="bookingDate" style="width:80px" class="date-pick" />
            <input name="bookingDate2" id="bookingDate2" style="width:80px" class="date-pick" />
            <input class="button" name="user-search" type="submit" value="User Search" />
        </form>
        </div>

There are a few clear:both present, but nothing that I can see would be messing with the formatting. Can you spot my error?

Answer 1

You need to get rid of clear:both from
#chooseDateForm li {clear:both;} and just float it to the left.