Friday, November 22, 2013

Very User Friendly jQuery Date Picker

Good Looking &Very User Friendly jQuery Date Picker Can be implemented as:


  <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="../js/jquery.ui.datepicker.js" type="text/javascript"></script>
   <link href="../Styles/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
       $(document).ready(function () {
           $(".yourtxtboxclass").datepicker({
               changeMonth: true,
               changeYear: true,
               showButtonPanel: true,
               showOn: 'button',
               buttonImage: '../Images/calendar.gif',
               buttonImageOnly: true,
               dateFormat: 'mm/dd/yy'
           });
       });
    </script>


styles:
 /*date picker styles*/

<style type="text/css">
    .ui-datepicker { width: 12em; padding: .2em .2em 0; display: none;}
    .ui-datepicker table {width: 100%; font-size:10px; font-family:Trebuchet MS; border-collapse: collapse; margin:0 0 .4em;}

</style>
    /*date picker styles*/

    Can be used to as many no. of TextBoxes with only including CssClass='
ShortDatetxt'  

<asp:TextBox CssClass="ShortDatetxt" ID="txtDOB1"  runat="server" onkeypress="javascript:return false;"></asp:TextBox>
  <asp:TextBox CssClass="ShortDatetxt" ID="txtDOB2"  runat="server" onkeypress="javascript:return false;"></asp:TextBox>

No comments: