Using Bootstrap Daterange Picker

Using Bootstrap daterange picker. Hello.., on this occasion, I want to share tutorials using date range picker in your web application. This starts when I search for jquery related daterange picker which I will use as data in my database.

If you plan will require input data in terms of time (date and time or both) then this jquery you should try. All information related to the use of this component has been described on the website and its use is not too difficult. Date Range Picker relies on Bootstrap, jQuery and Moment.js. So don't forget to include the required scripts and stylesheet in your page.

The following is an example of using the date range picker for bootstrap.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>PHP Search Mysql data</title>

    <!-- Bootstrap Core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery -->
    <script src="bootstrap/js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
 <!-- Date Range Picker -->
 <link href="daterangepicker/daterangepicker.css" rel="stylesheet">
 <script src="daterangepicker/moment.js"></script>
 
</head>

<body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
 <div class="container">
            
        <div class="navbar-header">
   <a class="navbar-brand" href="http://coding-cheese.blogspot.com/">Coding Cheese</a>
  </div>
   <ul class="nav navbar-nav">
    <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
   <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Page 1-1</a></li>
     <li><a href="#">Page 1-2</a></li>
     <li><a href="#">Page 1-3</a></li>
   </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
            
  </div>

</div>

<div class="container">
<form class="form-horizontal" method="post" enctype="multipart/form-data">
 <fieldset>
  <div id="legend">
   <legend class=""><i class="glyphicon glyphicon-plus"></i>&nbsp; Add Data</legend>
  </div>  
  <div class="form-group">
    <label class="col-md-4 control-label" for="fullname">Full Name</label>  
    <div class="col-md-6">
    <input id="fullname" name="fullname" placeholder="Full Name" class="form-control input-md" required="" type="text" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="email">Email</label>  
    <div class="col-md-6">
    <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="schedule">Schedule</label>  
    <div class="col-md-6">
    <input id="schedule" name="schedule" placeholder="Schedule" class="form-control input-md" type="text" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="jobdesk">Jobdesk</label>  
    <div class="col-md-6">
   <select id="jobdesk" name="jobdesk" class="form-control" required >
    <option value="Animation Design">Animation Design</option>
    <option value="Application Testing">Application Testing</option>
    <option value="Hardware Maintenance">Hardware Maintenance</option>
    <option value="Network Maintenance">Network Maintenance</option>
    <option value="Quality Control">Quality Control</option>
    <option value="Developt Application">Developt Application</option>
   </select>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-md-4 control-label" for="add_data"></label>
    <div class="col-md-4">
   <button id="add_data" name="add_data" class="btn btn-success">Add</button>
    </div>
  </div>
  
 </fieldset> 
<form>
</div>

<script src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
  $("#schedule").daterangepicker({ //date range picker
   "drops": "down",
   locale: {
    format: 'DD/MM/YYYY'
   }
  });
    });
</script>

</body>
</html>