Showing posts with label DataTimePicker. Show all posts
Showing posts with label DataTimePicker. Show all posts

Jquery Datepicker not working in Master Page Using Asp.Net

05:34:00  , , ,  1 comment

Jquery Datepicker not working in Master Page

Jquery Datepicker  not working inside of master page because ContentPlaceholder strange id does not  find so put input id properly avoid this problem.


Working:

  $("input[id$='textboxDate']")

                         
                                             DEMO

                                    


                        HTML CODING

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

     <%--NOT WORKING--%>
    <script type="text/javascript" lang="javascript">
        $(function () {
            $("#textboxDate").datepicker({
                dateFormat: 'dd/mm/yy',
            });
        });
    </script>

    <%--WORKING--%>

    <script type="text/javascript" lang="javascript">
        $(function () {

            $("input[id$='textboxDate']").datepicker({
                dateFormat: 'dd/mm/yy',
            });
        });
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>

   
         
</head>
<body>
    <div>
 
        <table><tr><td>
            <asp:Label ID="Label1" runat="server" Text="Select Date"></asp:Label>
            </td><td>
                <asp:TextBox ID="textboxDate" runat="server"></asp:TextBox>
            </td></tr></table>
  
    </div>
</body>
</html>


</asp:Content>


Add New Master page - next add new Webform for Masterpage  -  Jquery Datetime picker input id value accept Content place holder 





Next - Textbox id for call child strange id to masterpage ContentPlaceHolder






Read More

JQuery DateTimePicker Plugin with Asp.Net Textbox

06:54:00  , , ,  1 comment

JQuery DateTimePicker 

JQuery DateTimePicker Plugin Access Within Textbox Control Using JQuery in Asp.Net.

                               DEMO

                         Download

                 HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Using Jquery Datetimepicker & Timepicker in Textbox Asp.Net</title>
    <link rel="stylesheet" type="text/css" href="./jquery.datetimepicker.css" />
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jquery.datetimepicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#txtDate').datetimepicker({

                format: 'd/m/Y H:i', 
                 
            });          
           
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div  align="center">
        <h3>
           Jquery Day&Month Format </h3>
        <asp:TextBox ID="txtDate" runat="server" />
      
    </div>
    </form>
</body>
</html>

 DEMO


  $('#txtDate').datetimepicker({ 
                
                datepicker:'true', 
            }); 

DEMO   
      

 $('#txtDate').datetimepicker({                 

                

                 format : 'D/M/Y', 
            }); 


   DEMO 


$('#txtDate').datetimepicker({                 

                

                 format : 'D/m/Y', 
            }); 



  DEMO    


$('#txtDate').datetimepicker({                 


                
                timepicker:false,

            });  


DEMO


                 $('#txtDate').datetimepicker({                 


                
                yearStart:2000,
             yearEnd: 2050,

            });                         
                

 DEMO


Read More

How to Use Jquery DatePicker within Ajax UpdatePanel Using in Asp.Net

01:30:00  , , , , ,  No comments

Use Jquery DatePicker within Ajax UpdatePanel

 Jquery Date Picker use to inside of ajax updatepanel because of  Avoid postback use to pageload using  Jquery in Asp.Net.

                                DEMO

                       

                                 Download

                            HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>How to Use Jquery DatePicker within Ajax UpdatePanel Using in Asp.Net</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script type="text/javascript" lang="javascript">
        function pageLoad() {
            $(function () {
                $("#<%=txtDate.ClientID%>").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: "dd/mm/yy"
                });
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">   
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
           Select Date <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>          
        </ContentTemplate>
    </asp:UpdatePanel></div>
    </form>
</body>
</html>



Add - New Web form - Jquery Datepicker  add inside of Ajax Updatepanel use to pageload




Read More

Disable WeekEnds Using JQuery DateTimePicker Asp.Net

01:57:00  , , ,  1 comment

Disable WeekEnds Using JQuery DateTimePicker  

JQuery DatetimePicker Show WeekEnds Disable Before Showing Using Asp.Net .

                          DEMO

                    Download

                  HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Disable WeekEnds Using JQuery DateTimePicker Asp.Net</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      
   
    <script type="text/javascript" lang="javascript">
        $(function () {
            $("#<%=textboxDate.ClientID %>").datepicker({
                dateFormat: "dd/mm/yy",
                changeMonth:true,
                beforeShowDay: function (DATE) {
                    var Week = DATE.getDay();
                    if (Week == 0 || Week == 6)
                    {
                        return [false];
                    }
                    else
                    {
                        return [true];
                    }
                }
           
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
      
        <table><tr><td>
                        <asp:Label ID="Label1" runat="server" Text="Select Date"></asp:Label>
            </td><td>
                <asp:TextBox ID="textboxDate" runat="server"></asp:TextBox>
            </td></tr></table>
 
    </div>
    </form>
</body>

</html>


Add New Webform - Add Jquery Source  & Weekends Show Disable



Read More