Uderc programming article aggregator sites

Date time picker script does not look right when calender pops up

Tags:
Answers: Have 17 answers
Advertisement
When I use this script in my header, my date time picker does not look right.  The pop up calender works but the layout is off,  here is the code I am adding to my header:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="style.css" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min .css">
And here is the code I am adding to the body of the html page below: Is it the placement of the code in the header? I've tried the beginning and the end of the hearder but no difference.  Thanks for your time on this....
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min. js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-B R.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
language: 'en'
</script>
Advertisement
The best answer: Page is not up yet, can I attach the html to this forum?  I'l cut and paste the html below, thanks
<!DOCTYPE html>
<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
<!--[if lt IE 7]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- this is the header code for the date/time picker-->
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="style.css" type="text/css" media="screen"
     href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min .css">
      <!-- to here-->
    <meta charset="utf-8">
    <!-- Always force latest IE rendering engine & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- Put your title here! -->
    <title>Hawaii Beach Weddings</title>
    <meta name="description" content="">
     <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet">
    <!-- Load Open Sans and Merriweather from Google Fonts
        For optimal performance, customize it to load the styles you need:
        http://goo.gl/QufgJ
    -->
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700|Merriweathe r:400,700,900" rel="stylesheet">
    <!-- All JavaScript at the bottom, except for Modernizr
        Modernizr enables HTML5 elements & feature detects; It includes Respond, a polyfill for min/max-width CSS3 Media Queries
        For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
        <script src="js/modernizr-2.6.1.min.js"></script>
    <script src="js/modernizr-2.6.1.min.js"></script>
</head>
<body>
    <!-- Prompt IE 6 and 7 users to install Chrome Frame:        chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 8]>
        <p class="chromeframe alert alert-warning">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
    <![endif]-->
    <header id="master-header" class="clearfix" role="banner">
        <hgroup>
            <h1 id="site-title"><a href="index.html" title="Your Site Name">Hawaii Beach Weddings</a></h1>
            <h1 id="site-title2"><a href="index.html" title="Your Site Name">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h1>
            <h2 id="site-description">Where the Sun, Sand and Love come together...</h2>
        </hgroup>
    </header> <!-- #master-header -->
<div id="main" class="row">
    <!-- Main navigation -->
    <nav class="main-navigation span12 clearfix" role="navigation">
        <h3 class="assistive-text">Main menu</h3>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li class="current">
                <a href="about.html">About</a>
                <ul class="sub-menu">
                    <li><a href="http://www.google.com">Subpage 1</a></li>
                    <li><a href="#">Subpage 2</a></li>
                </ul>
            </li>
            <li><a href="contact.html">FAQ's</a></li>
        </ul>
    </nav> <!-- #main-navigation -->
<div id="content" role="main" class="span12">
    <article class="page hentry">
        <header class="entry-header">
            <h1 class="entry-title">Simple Beach Weddings</h1>
        </header> <!-- .entry-header -->
        <div class="entry-content">
            <p>We specialize in simplicity for your beach wedding.  Let us keep it simple by offering what you need to make your beach wedding easy </p>
            <!-- Typography
            ================================================== -->
            <section id="typography">
                <h1>I am first a photographer who loves to<small></small>capture &quot;the moment.&quot;</h1>
                <p>By organizing Hawaii Beach Weddings, I have allowed myself to do what I do best: capture your moment. I use industry professionals to make a sometimes stressful event easy. By keeping it to a few simple choices: A Minister (necessary), Flowers, Music, Video, Chairs (optional), I have allowed you to quickly design your wedding event and enjoy your stay in the islands. </p>
                    <div class="row">
                        <div class="span7">
                            <h2>Ministers:</h2>
                            <h3>Reverand Robert Hoyt</h3>
                                            <p> </p>
                        </div>
                </div>
                  <h2> </h2>
                    <div class="row"></div>
                    <div class="row">
              </div>
                <h2> </h2>
            </section>
            <section id="tables">
              <div class="row">
              </div> <!-- .row -->
            </section> <!-- #tables -->
            <!-- Forms
            ================================================== -->
            <section id="forms">
                <h1>Let's begin with your contact information.</h1>
                <form class="row">
                    <fieldset class="span5">
                      <p>
                        <label>Name
                          <input type="text" required></label></p>
                          <br>
                          <p><label>Phone number with area code <input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder=" 123-456-7891"></label></p>
                          <br>
                          <p>
                          <label>Email
                          <input type="email"></label></p>
                          <br>
                          <h1>Where would you like your wedding to be?</h1>
             <p><label>Honolulu (South Oahu)<input type="radio" name="rad"></label></p>
             <p><label>Waimanalu (East Oahu) <input type="radio" name="rad"></label></p>
                <br>     
                <h1>What date & time would you like to have your wedding?</h1>
                 <!--This is the date/time picker-->
                      <div id="datetimepicker" class="input-append date">
      <input type="text"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>
    <script type="text/javascript"
     src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
     src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min. js">
    </script>
    <script type="text/javascript"
     src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-B R.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'MM/dd/yyyy hh:mm:ss',
        language: 'en'
    </script>
    <br>
                     <h1>What type of flowers would you like to have?</h1>
                     <p>
                            <label>Bouquet<br>
                                <select>
                                    <option>None</option>
                                    <option>Red roses</option>
                                    <option>White roses</option>
                                    <option>Hibiscus</option>
                                </select>
                            </label>
                        <p>
                            <label>Flowers<br>
                                <select>
                                    <option>None</option>
                                    <option>Roses</option>
                                    <option>Orchids</option>
                                    <option>Hibiscus</option>
                                </select>
                            </label>
                              <h1>What type of Leis would you like to have?</h1>
                            <label>Leis<br>
                                <select>
                                    <option>None</option>
                                    <option>Kukui nut (male)</option>
                                    <option>Orchids (inexpensive)</option>
                                    <option>Stephanotus (sweet smelling</option>
                                </select>
                            </label>
</fieldset>
<fieldset class="span4">
                      <p>
                       <!--this is the chair number selector-->
                        <p>
                           <label>Music<br>
                                <select>
                                    <option>None</option>
                                    <option>solo singer with ukulele</option>
                                    <option>solo singer with guitar</option>
                                    <option>solo guitar instrumental</option>
                                    <option>small ensemble</option>
                                </select>
                            </label>
                          <br>
                          <label for="s">Number of Chairs</label><p>
                            <select id="s">
                                <option>none</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                            </select>
                        </p>
                        <p>
                          <label for="t">Notes</label> <textarea id="t" cols="30" rows="5">Textarea text</textarea></p>
                    </fieldset>
            <!-- Miscellaneous
            ================================================== --><!-- #miscellaneous -->
        </div> <!-- .entry-content -->
    </article> <!-- .post.hentry -->
</div> <!-- #content -->
</div> <!-- #main -->
    <footer id="footer" role="contentinfo">
        <!-- You're free to remove the credit link to Jayj.dk in the footer, but please, please leave it there -->
    </footer> <!-- #footer -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <!-- Load custom scripts -->
    <script src="js/script.js"></script>
</body>
</html>