garteth Posted July 12, 2011 Share Posted July 12, 2011 Hi I am currently working my way through this tutorial which will produce a pop up calendar. Something that is really annoying though is that where there should be a small calendar next to the textfield I have 2 small calendars. I have provided my code and an attached screenshot. Thanks !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>jQuery datePicker simple datePickerStartEnd demo</title> <!-- firebug lite --> <script type="text/javascript" src="firebug.js"></script> <!-- jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- required plugins --> <script type="text/javascript" src="date.js"></script> <!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]--> <!-- jquery.datePicker.js --> <script type="text/javascript" src="jquery.datePicker.js"></script> <!-- datePicker required styles --> <link rel="stylesheet" type="text/css" media="screen" href="datePicker.css"> <!-- page specific styles --> <link rel="stylesheet" type="text/css" media="screen" href="demo.css"> <!-- page specific scripts --> <script type="text/javascript" charset="utf-8"> $(function() { $('.date-pick').datePicker() $('#start-date').bind( 'dpClosed', function(e, selectedDates) { var d = selectedDates[0]; if (d) { d = new Date(d); $('#end-date').dpSetStartDate(d.addDays(1).asString()); } } ); $('#end-date').bind( 'dpClosed', function(e, selectedDates) { var d = selectedDates[0]; if (d) { d = new Date(d); $('#start-date').dpSetEndDate(d.addDays(-1).asString()); } } ); }); </script> </head> <body> <div id="container"> <h1>jquery.datePicker example: linked datePickers with start and end dates</h1> <p><a href="index.html">< date picker home</a></p> <p> The following example displays how you can synchronise two date pickers together. A common scenario for an online date picker is when booking flights or something where you need to input outbound and inbound dates. The start date must be before the end date and vice versa. We can enforce this rule with a very simple little bit of script. </p> <form name="chooseDateForm" id="chooseDateForm" action="#"> <fieldset> <legend>Test date picker form</legend> <ol> <li> <label for="start-date">Start date:</label> <input name="start-date" id="start-date" class="date-pick dp-applied"><a href="#" class="dp-choose-date" title="Choose date">Choose date</a> </li> <li> <label for="end-date">End date:</label> <input name="end-date" id="end-date" class="date-pick dp-applied"><a href="#" class="dp-choose-date" title="Choose date">Choose date</a> </li> <li> <label for="test-select">Test select:</label> <select name="test-select" id="test-select" style="width: 170px"> <option value="1">Test SELECT </option> <option value="2">Doesn't shine through</option> <option value="3">Even in IE</option> <option value="4">Yay!</option> </select> </li> </ol> </fieldset> </form> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.