Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Jquery calendar

Status
Not open for further replies.

DarwinIT

Programmer
Apr 25, 2008
142
US
I'm workingin with some jquery code downloaded from Google.
I'm trying to clone some functionality I don't understand from one project to another. This is some code that I'm putting in an aspx page. There is a css file associated - with ui- prefacing all of the statements for the datepicker. When I get focus on the text box which should be associated with end-date or begin-date, the calendar does not appear as desired. I can' tell anything different from the original project that works and my new one. Is the code below some kind of plugin configuration info or something? Anyone have a clue why the onfocus is not firing to show the calendar?


<script type="text/javascript">
$(document).ready(function () {
// jQuery UI Datepicker
$("#end-date .datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-99y',
showOtherMonths: true,
selectOtherMonths: true,
yearRange: '-99:+0'
});
$("#begin-date .datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '-18y',
minDate: '-99y',
showOtherMonths: true,
selectOtherMonths: true,
yearRange: '-99:+0'
});


}
</script>


here's the aspx markup for the two calendar fields;


<table id="Table2" cellspacing="0" cellpadding="4" width="600" border="0">
<tr class="altrow1">
<td width="50%">
<fieldset id="Fieldset1">
<label id="Label1" class="required" for="<%= txtBegDate.ClientID %>">
<span class="labelTxt">Begin Date</span>
</label>
<br />
<asp:TextBox ID="txtBegDate" runat="server" MaxLength="10" Columns="12" CssClass="datepicker"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBegDate" runat="server" ControlToValidate="txtBegDate"
CssClass="attn" Display="Dynamic" EnableClientScript="false" ErrorMessage="<strong>Required</strong>"
ForeColor=""></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cusBeginDate" runat="server" CssClass="attn" Display="Dynamic"
EnableClientScript="False" ErrorMessage="<strong>Not Valid</strong>" ForeColor=""
OnServerValidate="cuvBeg_ServerValidate"></asp:CustomValidator>
</fieldset>
<asp:customvalidator id="cuvBeg" runat="server" errormessage="End Date cannot be < Begin Date"></asp:customvalidator></td>
<td width="50%">
<fieldset id="end-date">
<label id="lblenddate" class="required" for="<%= txtEndDate.ClientID %>">
<span class="labelTxt">End Date</span>
</label>
<br />
<asp:TextBox ID="txtEndDate" runat="server" MaxLength="10" Columns="12" CssClass="datepicker"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEndDate" runat="server" ControlToValidate="txtEndDate"
CssClass="attn" Display="Dynamic" EnableClientScript="false" ErrorMessage="<strong>Required</strong>"
ForeColor="" ValidationGroup="McacStep2"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cusEndDate" runat="server" CssClass="attn" Display="Dynamic"
EnableClientScript="False" ErrorMessage="<strong>Not Valid</strong>" ForeColor=""
OnServerValidate="cuvBeg_ServerValidate"></asp:CustomValidator>
</fieldset>
<asp:customvalidator id="cuvEnd" runat="server" errormessage="End Date cannot be < today"></asp:customvalidator></td>
</tr>
 
change the jquery selector
Code:
$(function () {
   $(".datepicker").datepicker({
      changeMonth: true,
      changeYear: true,
      maxDate: '-18y',
      minDate: '-99y',
      showOtherMonths: true,
      selectOtherMonths: true,
      yearRange: '-99:+0'
   });
});
this will configure all elements with the datepicker class.

Jason Meckley
Programmer

faq855-7190
faq732-7259
 
Turns out I was missing a closing parenthesis in plug in configuration. Thanks for the response.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top