Friday, May 18, 2012

JQuery DatePicker

How to use JQuery DatePicker:


u have to download these 3 files jquery-ui.css, jquery.min.js, jquery-ui.min.js
then create folder 'css' in ur application domain and copy jquery-ui.css file it.
create folder 'js' in ur application domain and copy jquery.min.js and jquery-ui.min.js file in it.

coding part

add in <head> section

<link rel="Stylesheet" type="text/css" href="css/jquery-ui.css"/>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
    $(function () {
        var fmt = {
            changeYear: true,
            yearRange: "-3:",
            changeMonth: true
        };

        $("#datepic").datepicker(fmt);  //datepic is id of textbox where u want to use datepicker
       
    });
</script>

if u want to use date picker in ajax then use this
 <script type="text/javascript">
$('#<%=txtRdate.ClientID %>').live('click', function() {
        $(this).datepicker({showOn:'focus',changeYear: true,
            yearRange: "-3:",
            changeMonth: true}).focus();
    });
//txtRdate is asp.net textbox control id. where u want to use date picker
</script>

No comments:

Post a Comment