Menu ▼


Below JavaScript function getdatetime() will return the date string in mm/dd/yyyy hhmmss ampm format. You need to pass date as parameter that need to be returned in the format mm/dd/yyyy hhmmss ampm. If you want current date in the format then you can simple call the function as getdatetime(new Date());

Example

JavaScript Function

function getdatetime(dt) {
    var res = "";
    res += formatdigits(dt.getMonth() + 1);
    res += "/";
    res += formatdigits(dt.getDate());
    res += "/";
    res += formatdigits(dt.getFullYear());
    res += " ";
    res += formatdigits(dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours());
    res += ":";
    res += formatdigits(dt.getMinutes());
    res += ":";
    res += formatdigits(dt.getSeconds());
    res += " " + dt.getHours() > 11 ? " PM" : " AM";
    return res;
}
function formatdigits(val) {
    val = val.toString();
    return val.length == 1 ? "0" + val : val;
}

Calling function:

var dtformated = getdatetime(new Date());
$("#divdatetime").html(dtformated);

Source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        function getdatetime(dt) {
            var res = "";
            res += formatdigits(dt.getMonth() + 1);
            res += "/";
            res += formatdigits(dt.getDate());
            res += "/";
            res += formatdigits(dt.getFullYear());
            res += " ";
            res += formatdigits(dt.getHours() > 12 ? dt.getHours() - 12 : dt.getHours());
            res += ":";
            res += formatdigits(dt.getMinutes());
            res += ":";
            res += formatdigits(dt.getSeconds());
            res += " " + dt.getHours() > 11 ? " PM" : " AM";
            return res;
        }
        function formatdigits(val) {
            val = val.toString();
            return val.length == 1 ? "0" + val : val;
        }
        $(document).ready(function () {
            var dtformated = getdatetime(new Date());
            $("#divdatetime").html(dtformated);
        });
    </script>
</head>
<body>
    <div id="divdatetime">
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 25 Nov 2016

Below JavaScript function getdate() will return the date string in mm/dd/yyyy format. You need to pass date as parameter that need to be returned in the format mm/dd/yyyy. If you want current date in the format then you can simple call the function as getdate(new Date());

Example:

Javascript Function:

function getdate(dt) {
    var res = "";
    if ((dt.getMonth() + 1).toString().length < 2)
        res += "0" + (dt.getMonth() + 1).toString();
    else
        res += (dt.getMonth() + 1).toString();
    res += "/";
    if (dt.getDate().toString().length < 2)
        res += "0" + dt.getDate().toString();
    else
        res += dt.getDate().toString();
    res += "/" + dt.getFullYear().toString();
    return res;
}

Calling function:

var dtformated = getdate(new Date());
$("#divdatetime").html(dtformated);

Source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        function getdate(dt) {
            var res = "";
            if ((dt.getMonth() + 1).toString().length < 2)
                res += "0" + (dt.getMonth() + 1).toString();
            else
                res += (dt.getMonth() + 1).toString();
            res += "/";
            if (dt.getDate().toString().length < 2)
                res += "0" + dt.getDate().toString();
            else
                res += dt.getDate().toString();
            res += "/" + dt.getFullYear().toString();
            return res;
        }
        $(document).ready(function () {
            var dtformated = getdate(new Date());
            $("#divdatetime").html(dtformated);
        });
    </script>
</head>
<body>
    <div id="divdatetime">
    </div>
</body>
</html>

Read More...
Submited By : mrkraju On 17 Nov 2016

JavaScript inbuilt array reverse() method reverses the order of the elements in an array (original array will be reversed).

Example
Original Array: var ary = ["One", "Two", "Three", "Four", "Five"];



Output


Syntax
document.getElementById("snpresult").innerText = ary.reverse();

Source code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script language="javascript">
    var ary = ["One", "Two", "Three", "Four", "Five"];
    function reverseArray() {
        document.getElementById("snpresult").innerText = ary.reverse();
    }
</script>
</head>
<body>
Original Array:
var ary = ["One", "Two", "Three", "Four", "Five"];
<br />
<br />
<input type="button" onclick="reverseArray();" value="Print Reverse Array" />
<br />
<br />
<span id="snpresult"></span>
</body>
</html>
Read More...
Submited By : mrkraju On 09 Nov 2015

In this example we will see how to redirect one web page to another web page using javascript. we need to set the redirect url to window.location.href, then the web page will be redirect to given url.

Syntax: window.location.href = "url here";

Example

Redirect this web site to

  • If we give the relative path as url, then the page will be redirected to another page with in the web site.
    • ex : if we give the url as "/blogs/" then the page will be redirect to "http://www.dotnetlearners.com/blogs/"
  • we can give the another website url, so that it will redirect to another web site.
    • ex: http://www.google.com

Source Code

<html>
<head>
    <title></title>
    <script language="javascript">
        function redirectwebsite() {
            var url = document.getElementById("txtwebsiteurl").value;
            window.location.href = url;
        }
    </script>
</head>
<body>
    Redirect this web site to
    <input type="text" id="txtwebsiteurl" value="http://www.dotnetlearners.com" style="width: 410px;" />
    <input type="button" value="Redirect" onclick="redirectwebsite();" />
</body>
</html>
Read More...
Submited By : mrkraju On 22 Sep 2014

Some times we may need to perform same action multiple times. by using javascript "setInterval" function we can call specific functionality continuously in a specific time interval. to stop the loop we need to use the "clearInterval" function.

Syntax : var objInterval = setInterval(code, delay);
where code is the set of action or a function, and delay is the time interval in milliseconds.
               clearInterval(objInterval);
where objInterval is the interval id.

Example

Count down from

JavaScript

var countdown = 0;
var objInterval;
function startcountdown() {
    countdown = parseInt(document.getElementById("txtcountdown").value, 10);
    objInterval = setInterval(showcountdown, 1000);
}
function showcountdown() {
    document.getElementById("spncountdown").innerHTML = countdown;
    if (countdown < 0) {
        clearInterval(objInterval);
        document.getElementById("spncountdown").innerHTML = "Completed.... setInterval cleared.";
    }
    else
        countdown--;
}

Source Code

<html>
<head>
    <title></title>
    <script language="javascript">
        var countdown = 0;
        var objInterval;
        function startcountdown() {
            countdown = parseInt(document.getElementById("txtcountdown").value, 10);
            objInterval = setInterval(showcountdown, 1000);
        }
        function showcountdown() {
            document.getElementById("spncountdown").innerHTML = countdown;
            if (countdown < 0) {
                clearInterval(objInterval);
                document.getElementById("spncountdown").innerHTML = "Completed.... setInterval cleared.";
            }
            else
                countdown--;
        }
    </script>
</head>
<body>
    Count down from
    <input type="text" id="txtcountdown" value="10" style="width: 40px; text-align: center;" />
    <input type="button" value="Start" onclick="startcountdown();" /><sapn id="spncountdown"
        style="color: Blue; font-size: 20px; padding-left: 20px;"></sapn>
</body>
</html>
Read More...
Submited By : mrkraju On 22 Sep 2014

When we want to perform a particular action or call a particular javascript method after a specific time, then we can achieve it by using javascript inbuilt function setTimeout.

"setTimeout" function will take 2 parameter , the first one is function and the second parameter is time in milliseconds.

Syntax : setTimeout(function, timeout);
where the function can be write there it self, are can write separately and can pass the function name as parameter.

Example

alert me after seconds

Method 1 : Writing javasript method as a parmeter

function showalert() {
    var timedelay = parseInt(document.getElementById("txttimerdelay").value, 10) * 1000;
    setTimeout(function () { alert(new Date()); }, timedelay);
}

Method 2 : Writing javasript method separately and passing method name as a parmeter

function showalert() {
    var timedelay = parseInt(document.getElementById("txttimerdelay").value, 10) * 1000;
    setTimeout(showtime, timedelay);
}
function showtime() {
    alert(new Date());
}

Source Code

<html>
<head>
    <title></title>
    <script language="javascript">
        function showalert() {
            var timedelay = parseInt(document.getElementById("txttimerdelay").value, 10) * 1000;
            setTimeout(function () { alert(new Date()); }, timedelay);
        }
        function showtime() {
            alert(new Date());
        }
    </script>
</head>
<body>
    alert me after
    <input type="text" id="txttimerdelay" value="2" style="width: 40px; text-align: center;" />
    seconds<input type="button" value="Show Alert" onclick="showalert();" />
</body>
</html>
Read More...
Submited By : mrkraju On 21 Sep 2014
By Using JavaScript setTimeout function we can redirect the page to a specific URL after a specific time. if we give the same URL the page will reload continuously in specific time interval.

Example:


Source Code:
<html>
<head>
    <script language="JavaScript">
    var count=5;
    window.onload = function () {
        setTimeout(reloadpage, 5000);
        showtime();
    }
        function reloadpage() {
            window.location.href = "http://www.dotnetlearners.com"
        }
        function showtime() {
            document.getElementById("spntime").innerHTML = count;
            count--;
            setTimeout(showtime, 1000);
        }
    </script>
</head>
<body>
    This page will redirect in <span id="spntime"></span> seconds....
</body>
</html>


Read More...
Submited By : mrkraju On 27 Apr 2014

SnoNameEmp NoDesignation
0 Name-0 Empno-0 Designation-0
1 Name-1 Empno-1 Designation-1
2 Name-2 Empno-2 Designation-2
3 Name-3 Empno-3 Designation-3
4 Name-4 Empno-4 Designation-4
5 Name-5 Empno-5 Designation-5
6 Name-6 Empno-6 Designation-6
7 Name-7 Empno-7 Designation-7
8 Name-8 Empno-8 Designation-8
9 Name-9 Empno-9 Designation-9
10 Name-10 Empno-10 Designation-10
11 Name-11 Empno-11 Designation-11
12 Name-12 Empno-12 Designation-12
13 Name-13 Empno-13 Designation-13
14 Name-14 Empno-14 Designation-14




Aspx Page:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function checkAll(gvExample, colIndex) {

            var GridView = gvExample.parentNode.parentNode.parentNode;

            for (var i = 1; i < GridView.rows.length; i++) {

                var chb = GridView.rows[i].cells[colIndex].getElementsByTagName("input")[0];

                chb.checked = gvExample.checked;

            }

        }

 

        function checkItem_All(objRef, colIndex) {

            var GridView = objRef.parentNode.parentNode.parentNode;

            var selectAll = GridView.rows[0].cells[colIndex].getElementsByTagName("input")[0];

            if (!objRef.checked) {

                selectAll.checked = false;

            }

            else {

                var checked = true;

                for (var i = 1; i < GridView.rows.length; i++) {

                    var chb = GridView.rows[i].cells[colIndex].getElementsByTagName("input")[0];

                    if (!chb.checked) {

                        checked = false;

                        break;

                    }

                }

                selectAll.checked = checked;

            }

        }

 

 

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView ID="gvExample" runat="server" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B"

            HeaderStyle-BackColor="#C2D69B">

            <Columns>

                <asp:TemplateField>

                    <HeaderTemplate>

                        <asp:CheckBox ID="chkAll" runat="server" onclick="checkAll(this,0);" />

                    </HeaderTemplate>

                    <ItemTemplate>

                        <asp:CheckBox ID="chkitem" runat="server" onclick="checkItem_All(this,0)" />

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Sno" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Left">

                    <ItemTemplate>

                        <asp:Label ID="lblSno" runat="server" Text='<%# Bind("SNO") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Name" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left">

                    <ItemTemplate>

                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Emp No" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left">

                    <ItemTemplate>

                        <asp:Label ID="lblEmpno" runat="server" Text='<%# Bind("Empno") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

                <asp:TemplateField HeaderText="Designation" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left">

                    <ItemTemplate>

                        <asp:Label ID="lblDesignation" runat="server" Text='<%# Bind("Designation") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

    </div>

    </form>

</body>

</html>

 

Code Behind :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

namespace WebApplication2

{

    public partial class WebForm2 : System.Web.UI.Page

    {

        DataTable dt = new DataTable();

        DataRow dr;

       

        protected void Page_Load(object sender, EventArgs e)

        {

            bindGrid();

        }

 

        public void bindGrid()

        {

            dt.Columns.Add("SNO");

            dt.Columns.Add("Name");

            dt.Columns.Add("Empno");

            dt.Columns.Add("Designation");

            for (int i = 0; i < 15; i++)

            {

                dr = dt.NewRow();

                dr["SNO"] = i;

                dr["Name"] = "Name-" + i;

                dr["Empno"] = "Empno-" + i;

                dr["Designation"] = "Designation-" + i;

                dt.Rows.Add(dr);

                dt.AcceptChanges();

                gvExample.DataSource = dt;

                gvExample.DataBind();

            }

        }

    }

}

 

Read More...
Submited By : Learn DotNet On 24 Oct 2013

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckAllCheckBox.aspx.cs"

    Inherits="WebApplication2.CheckAllCheckBox" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script language="javascript">

        function CheckAll() {

            var intIndex = 0;

            var rowCount = document.getElementById('cbList').getElementsByTagName("input").length;

            for (i = 0; i < rowCount; i++) {

                if (document.getElementById('cbAll').checked == true) {

                    if (document.getElementById("cbList" + "_" + i)) {

                        if (document.getElementById("cbList" + "_" + i).disabled != true)

                            document.getElementById("cbList" + "_" + i).checked = true;

                    }

                }

                else {

                    if (document.getElementById("cbList" + "_" + i)) {

                        if (document.getElementById("cbList" + "_" + i).disabled != true)

                            document.getElementById("cbList" + "_" + i).checked = false;

                    }

                }

            }

        }

 

        function UnCheckAll() {

            var intIndex = 0;

            var flag = 0;

            var rowCount = document.getElementById('cbList').getElementsByTagName("input").length;

            for (i = 0; i < rowCount; i++) {

                if (document.getElementById("cbList" + "_" + i)) {

                    if (document.getElementById("cbList" + "_" + i).checked == true) {

                        flag = 1;

                    }

                    else {

                        flag = 0;

                        break;

                    }

                }

            }

            if (flag == 0)

                document.getElementById('cbAll').checked = false;

            else

                document.getElementById('cbAll').checked = true;

 

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div style="border: 1px solid grey; width: 100px">

            <asp:CheckBox ID="cbAll" runat="server" Text="Select All" onclick="CheckAll();" BackColor="Aqua" />

            <asp:CheckBoxList ID="cbList" runat="server" ValidationGroup="VGroup" onclick="UnCheckAll();">

                <asp:ListItem Value="1">Asp.net</asp:ListItem>

                <asp:ListItem Value="2">C#.net</asp:ListItem>

                <asp:ListItem Value="3">Vb.net</asp:ListItem>

                <asp:ListItem Value="4">Oracle</asp:ListItem>

                <asp:ListItem Value="5">SqlServer</asp:ListItem>

                <asp:ListItem Value="6">Sharepoint</asp:ListItem>

            </asp:CheckBoxList>

        </div>

    </div>

    </form>

</body>

</html>

 

 

Read More...
Submited By : Learn DotNet On 23 Oct 2013




Search dotnetlearners.com