Monday 4 August 2014

Jquery Getiing Error In DatePiker

Jquery Error DatePiker


Code:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
    <%--<link href="Styles/jquery.dateentry.css" rel="stylesheet" type="text/css" />--%>
    <script src="Scripts/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/jquery.plugin.js" type="text/javascript"></script>
    <%--<script src="Scripts/jquery.datepick.js" type="text/javascript"></script>--%>
    <script src="Scripts/jquery.dateentry.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#abc").datepicker({
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true,
                dateFormat: "dd/M/yy",
                changeMonth: true,
                changeYear: true
            });
        });
        $(function () {
            //            $('#abc').dateEntry();
            $('#abc').dateEntry({ dateFormat: 'dmy/' });

        });

        var myDP;
        $(function () {
            
            $(".monthPicker").datepicker({
                dateFormat: 'MM yy',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: false,
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true,
                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
                }
            });
        });

        $(function () {
           
            $('.monthPicker').dateEntry({ dateFormat: 'dmy/', minDate: new Date(), defaultDate: new Date() });
        });
        $(function () {
            
            $('.monthPicker').on('blur', function () {
                abb();
                alert('tt');
            });
        });

        function abb() {
            $(".monthPicker").datepicker({
                dateFormat: 'MM yy',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: false,
                showOn: "button",
                buttonImage: "images/calendar.gif",
                buttonImageOnly: true
            });
        }

        $(function () {
            $(".monthPicker").focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <input type="text" id="abc" />
    <input type="text" id="Text1" class="monthPicker" />
    <%--<input type="text" id="popupDatepicker"/>--%>
</asp:Content>


Linkes:
:http://keith-wood.name/dateEntry.html (for the Up-Down arrow key)

http://www.jquerybyexample.net/2012/06/show-only-month-and-year-in-jquery-ui.html (Auto Dropdown Update)

http://jqueryui.com/datepicker/  (Main Code)