Sunday 3 August 2014

Jquery Special kpsingh-asp DatePicker

HTML Code with Jquery


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test2.aspx.cs" Inherits="MySchool.Test2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="TempS/jquery-ui.css" rel="stylesheet" />

    <script src="TempS/jquery-1.10.2.js"></script>

    <script src="TempS/jquery-ui.js"></script>

    <script>
        $(function () {
            $("#datepicker").datepicker({
                dateFormat: "dd/M/yy",
                changeMonth: true,
                changeYear: true
            }).on('change', function () {
             
                var mydate = $("#datepicker").val();
                var d, m, y;
                d = mydate.substring(0, 2);
                m = mydate.substring(3, mydate.lastIndexOf('/'));
                y = mydate.substring(mydate.lastIndexOf('/') + 1, mydate.length);
                var monthNamesShort = $("#datepicker").datepicker("option", "monthNamesShort");
                var mName = monthNamesShort[parseInt(m) - 1];
                if (mName != undefined) {
                    mydate = d + "/" + mName + "/" + y;
                    //alert(mydate);
                    $("#datepicker").datepicker("setDate", mydate);
                }
                else if (monthNamesShort.indexOf(m) < 0) {
                    $("#datepicker").datepicker("setDate", new Date());
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>
                Date:
                <input type="text" id="datepicker" size="30" maxlength="11" />
            </p>
        </div>
    </form>
</body>
</html>


Other Jquery Datepicker with Image button

$(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
        defaultDate:new Date(),
        dateFormat:'dd/M/yy',
        navigationAsDateFormat:true
           
    }).datepicker("setDate", "20/Oct/2013");
});