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 SkipVought 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
0
0
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