Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JQuery How to use DatePicker

JQuery How to use DatePicker

A JQuery DatePicker can easily be added as a popup to a input text field.The popup shows when the textbox is focused and is closed by clicking on the “Done” button or clicking anywhere else on the page.Really, it helps us to input day,month,year very effectively and quickly…

By default, the popup showns as following :

JQuery DatePicker standard

JQuery DatePicker standard

In this article, I show you the way of configuring some basic features of this control :
1) Show week
2) Show button panel(Today, Done)
3) Show selection “change month”
4) Show selection “change year”
5) Change date format
6) Choose year range for selection

How to use DatePicker

++ Desgin HTML with a input text box field :

<form id="form1" runat="server">
<div>
    Input date : <asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
</div>
</form>

<form id="form1" runat="server"> <div> Input date : <asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox> </div> </form>

++ Add JQuery library by including *.js and css to head of HTML :
Download JQuery library plugin here

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<link href="Css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> <link href="Css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

++ Add Javascript code to process textbox field to show DateTimePicker :

<script language="javascript" type="text/javascript">
$(function() {
   //$("#txtCalendar").datepicker(); // by default
   $("#txtCalendar").datepicker({ showWeek: true, showButtonPanel: true, 
       changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', yearRange: '2010:2015' });
});
</script>

<script language="javascript" type="text/javascript"> $(function() { //$("#txtCalendar").datepicker(); // by default $("#txtCalendar").datepicker({ showWeek: true, showButtonPanel: true, changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', yearRange: '2010:2015' }); }); </script>

++ Run program, when focus on textbox, datepicker is shown as below image which I give some notes for the features mentioned above.

JQuery DatePicker after configuration

JQuery DatePicker after configuration

Mar 21, 2012quynhnguyen

Source Code Demo page

Update iPhone 4s To iOS 5.1 With WiFi or iTunesCreate Auto Refresh Page Or Redirect After A Given Seconds
You Might Also Like:
  • Jquery checkbox checked
  • Get Image Width Height With JQuery And JavaScript
  • JQuery Create Textbox With Count Down Limit Characters
  • ASP.NET JQuery Autocomplete Textbox
  • JQuery Allow only numeric characters or only alphabet characters in textbox
  • JQuery Get selected value of radio button
  • Javascript Problem Set focus textbox on Firefox
  • Auto Load YouTube Video As A Popup With JQuery FancyBox
  • Validate Date With JQuery And Date Object
  • JQuery Call Function To Parent And Children Div
quynhnguyen
10 years ago CSharp, Javascriptautocomplete, DatePicker, JQuery443
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,455 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,836 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,652 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,986 views
C# Read Json From URL And Parse/Deserialize Json
11,719 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development