Showing posts with label bootstrap. Show all posts
Showing posts with label bootstrap. Show all posts

Thursday, January 17, 2019

How to disable before today date in html 5

In this article i have explain how to disable today before date in html 5 calendar

Step 1-
Add the input filed in your html page

<input type="date" name="mydate">

which has input type date

Step 2-
Now i want disable date before today date . for doing this add following javascript code into your page 

 <script>
        var today = new Date().toISOString().split('T')[0];
        document.getElementsByName("mydate")[0].setAttribute('min', today);
    </script>



Wednesday, January 16, 2019

Bootstrap Slider in asp.net


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="AdTestDashboard.test" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap slider Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="JS/jquery.min.js"></script>
  <script src="JS/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
  }
  </style>
</head>
<body>
 <div class="container">
  <h2>Bootstrap slider Example</h2> 
  <div id="myslide" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myslide" data-slide-to="0" class="active"></li>
      <li data-target="#myslide" data-slide-to="1"></li>
      <li data-target="#myslide" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="slides/slide1.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="slides/slide2.jpg" alt="Chicago" style="width:100%;">
      </div>
   
      <div class="item">
        <img src="slides/slide3.jpg" alt="New york" style="width:100%;">
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myslide" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myslide" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
</body>
</html>


Tuesday, December 11, 2018

bootstrap data table options

1. Remove Searching option fromm datatable 

  $('#example').DataTable({
                "searching": false
            });

2. Remove Pagination from datatable 

 $('#example').DataTable({
             "paging": false
                ]
            });

3. Remove filter from datatable 

 $('#example').DataTable({
            "showNEntries": false
               ]
            });

4. Remove showing entries from datatable

 $('#example').DataTable({
                "bInfo": false
                });

Saturday, June 2, 2018

difference between container and container-fluid in bootstrap

 The main difference between container and container-fluid as below.

.container has one fixed width for each screen size in bootstrap(xs,sm,md,lg);

.container-fluid expands to fill the available width

Featured Post

What is JavaScript? What is the role of JavaScript engine?

  The JavaScript is a Programming language that is used for converting static web pages to interactive and dynamic web pages. A JavaScript e...