Good Looking &Very User Friendly jQuery Date Picker Can be implemented as:
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>
<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:
Post a Comment