Showing posts with label Display Html Control using Datepicker control of jQuery. Show all posts
Showing posts with label Display Html Control using Datepicker control of jQuery. Show all posts

Tuesday, 23 December 2014

Display Html Control using Datepicker control of jQuery,Jquery Ui Widgets Date Picker Control



Jquery Ui Widgets Date Picker Control:
Task 1:Display Html Control using Datepicker control of jQuery?
DatePicker:
Jquery Ui provides a method i.e datepicker() to be applied to an input element type of text to be appear as datepicker ,calendar based control to pick the date for certain fields such as date of birth,eventdate
Syn:$(selector).date               
UI  design:
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="themes/jquery-ui-1.11.2/jquery-ui.theme.css" />
    <script type="text/javascript" src="Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.11.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
       
        $("#txt1").datepicker();
        });
    </script>
<div align="center">
    <b>Enter Date of Birth</b>
    <input type="text" id="txt1" />
   
    </div>

Task 2:Display Date Of birth Field With Following Options?

<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="themes/jquery-ui-1.11.2/jquery-ui.theme.css" />
    <script type="text/javascript" src="Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.11.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
       
        $("#txt1").datepicker();
        });
    </script>
<div align="center">
    <b>Enter Date of Birth</b>
    <input type="text" id="txt1" />
   
    </div>