7 replies to this topic

[mctim]

Does any one know of a good example of a date field where I click a button and it brings up a calendar and allows me to chose from the dates. I'm looking for the bare minimum work possible and I have almost 0 preference about color scheme or any other appearance related issues. I'm basically looking for a copy and paste example that works.

[papabear]

yes there is a good one that you can use.. it's already there and was build using jquery ( a javascript library ) you just have to link it into your html files
and use it

Please take a look at this Jquery UI DatePicker
Have some fun using it

[mctim]

This source was there, and I don't see any imports listed. What libraries will I need to use this?

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

<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

[papabear]

This source was there, and I don't see any imports listed. What libraries will I need to use this?

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

<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

you will be needing to import the Jquery UI files and the Jquery library that you can get at http://jquery.com
Please take a look into this Getting Started Guide for a good step by step instructions on how to use this cool plugin
if I'm not mistaken the imports looks like

<link type="text/css" href="css/themename/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

so you will be needing to import 3 files

the CSS of Jquery UI
the Jquery Lib
and the Jquery UI lib

Have fun

[mctim]

  $( "#datepicker" ).datepicker();

That Line is the one where I actually set the value of the text field date picker correct?

[mctim]

Do I need to define my on focus methods? Here's my source where the methods are defined and the text fields are defined. However, when I click on the field those functions don't run. Do I need to define on-focus for the text field?

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> 
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
name="start_date" id="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
name="end_date" id="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div> 

[mctim]

I've also tried defining an onfocus method who calls $( "#start_date" ).datepicker(); however that seems to throw the page into an infinite loop

[mctim]

I solved this issue. If you're interested here's another forum thread where I got some response about my issues: http://stackoverflow...not-functioning