Geek Answers Handbook

Use jQuery DatePicker in asp.net text box

How to connect DatePicker to a text field in jQuery.

+6
jquery
source share
3 answers

You should check the jQuery UI DatePicker .

ASP.NET Example

<script> $(function() { $( "#<%= txtDate.ClientID %>" ).datepicker(); }); </script> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtDate" runat="server" /> </div> </form>
+24
source share
 $(function() { $("#txtDatepicker").datepicker(); });

see an example of using this function.

0
source share

Where is the date of birth - text field.

Basic example:

 $(document).ready(function () { $("#DateOfBirth").datepicker( }); });

More complex example:

 $(document).ready(function () { $("#DateOfBirth").datepicker({ defaultDate: "-25y", dateFormat: "dd-mm-yy", yearRange: "c-80:c+40", inline: true, showAnim: 'fadeIn', changeMonth: true, changeYear: true, minDate: "-120y", maxDate: "-18y", }); });

Some clarification: defaultDate is set to date minus 25 years.

dateFormat is set on 12/26/2014. Do not use 'yyyy', otherwise the 4 character year will be displayed twice.

yearRange sets the number of years that is displayed in the drop-down list for the year (enabled by the option "changeyear: true") in the current year minus 80 years and plus 40 years (but is limited by the minimum and maximum date settings)

Some basic parameters:

  • Button
  • showOn: (displayed when the calendar button is pressed)
  • showOn: focus (shows when the input the calendar is attached to receives focus)
  • shows On: both (shown as above)
  • defaultDate: new date (2014, 12, 26)
  • defaultDate: "-25y" (shows today's date minus 25 years)
  • minDate: new date (1926, 1, 1)
  • maxDate: "+ 1m + 1w" (adds 1 month and 1 week to the current set date)
  • maxDate: new Date (2012, 1, 1)
  • dateFormat: "yy-mm-dd"
  • dateFormat: "dd-mm-yy"
  • dateFormat: 'DD, MM d, yy'
  • navigationAsDateFormat: true (removes the silly text "prev" and "next" and replaces the previous and the names in the next month).
  • stepMonths: 3 (pressing the next or previous buttons will move it for many months at once).
  • numberOfMonths: [2, 3] (shows 3 calendars at once)
  • showCurrentAtPos: 2 (should be used in conjunction with the above number OffMonths :.) Sets the current month at the selected position where several months are shown.)
  • showButtonPanel: true (shows the button bar under the feces with the Today button to set the date for today and the Finish button that closes the calendar ")
  • showWeek: true (shows the week number from 52 per year)
  • changeMonth: true (allow the user to change the month through the drop-down list)
  • changeYear: true (allow the user to change the year through the drop-down list)
  • yearRange: "c-80: c + 40" (c for the current. The annual range is the current year minus 80 years and plus 40 years, but this is limited by the minimum and maximum date settings
  • yearRange: "1990: 2014" (the year drop-down list shows the range of years available in the drop-down list)

Check out the full link here: http://api.jqueryui.com/datepicker/

0
source share

More articles:


All Articles