Tuesday, February 19, 2019

.::: Tutorial Using DATETIMEPICKER on php or other on Human time and Unix Time , Cara Menggunakan datetimepicker :::.

1. download bootstrap-datetimepicker-4.17.44.zip and jquery-ui-1.12.1.zip as example and unzip on /var/www/html or yourdisk
unzip bootstrap-datetimepicker-4.17.44.zip
unzip jquery-ui-1.12.1.zip
create file teguhtriharto.php
2. create head and link and meta
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>datetimepicker by Teguh Triharto</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 </head>

3. Script datetimepicker
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script type="text/javascript">
   $(function () {
    $('#from_date').datetimepicker({
     format:'YYYY-MM-DD hh:mm:ss',
                });
  
   });
  
   $(function () {
    $('#to_date').datetimepicker({
     format:'YYYY-MM-DD hh:mm:ss',
               
  });
  
   });
  </script>
  https://youtu.be/SGQnzJ19Xgc https://youtu.be/r2WoCX6QfBk
4. create form submit datetimepicker on body 1
<body>
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
   <div class="container">
   <div>
    <div style="padding-top: 25px;">
     <left><h1>datetimepicker by Teguh Triharto</h1></left>
    </div>       
    <br />
    <div class="row">
     <div class='col-sm-4'>
     </div>
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
      <label>From:</label>
      <div class="form-group">
       <div class='input-group date' >
       
        <input id='from_date' name="from_date" type='text' class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>
      
       <label>To:</label>
      <div class="form-group">
       <div class='input-group date' >
        <input id='to_date' type='text' name="to_date" class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>      
      </div>
     
 
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
     </div>
    </div>
   </div>
  </div>
   <table>
    <tr>
         <td colspan="3"><input type="submit" value="submit" name="submit" /></td>
    </tr>
   </table>
  </form>
 </body>


5. create script php for body2 for script php

<?php
   
    $from_date = strtotime($_POST['from_date']);
    $to_date = strtotime($_POST['to_date']);
   
    // sample output
    echo "Today is  : " . date("Y-M-D h:i:sa") . "<br>";
    echo "<br>";
    echo "Human Time: ".$_POST['from_date']. " To ".$_POST['to_date']. "<br>";
    echo "<br>";
    echo "Unix Time  : ".$from_date. " To ".$to_date. "<br>";
    echo "<br>";
    echo "http://www.youtube.com/teguhth" . "<br>";
    echo "http://www.dailymotion.com/teguhth1" . "<br>";
    echo "http://www.metacafe.com/teguhth" . "<br>";
    ?>

     <?php

     //Closing the connection to DB
    $conn->close();
    //set the response content type as JSON
    //header('Content-type: application/json');
    //output the return value of json encode using the echo function.
    //echo json_encode($jsonArray);

 ?>

6. combine script with name file "teguhtriharto.php"

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>datetimepicker by Teguh Triharto</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 </head>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script type="text/javascript">

   $(function () {
    $('#from_date').datetimepicker({
     format:'YYYY-MM-DD hh:mm:ss',
                });
  
   });
  
   $(function () {
    $('#to_date').datetimepicker({
     format:'YYYY-MM-DD hh:mm:ss',
               
  });
  
   });
  </script>
 
 <body>
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
   <div class="container">
   <div>
    <div style="padding-top: 25px;">
     <left><h1>datetimepicker by Teguh Triharto</h1></left>
    </div>       
    <br />
    <div class="row">
     <div class='col-sm-4'>
     </div>
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
      <label>From:</label>
      <div class="form-group">
       <div class='input-group date' >
       
        <input id='from_date' name="from_date" type='text' class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>
      
       <label>To:</label>
      <div class="form-group">
       <div class='input-group date' >
        <input id='to_date' type='text' name="to_date" class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>      
      </div>
     
 
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
     </div>
    </div>
   </div>
  </div>
   <table>
    <tr>
         <td colspan="3"><input type="submit" value="submit" name="submit" /></td>
    </tr>
   </table>
  </form>
 </body>

 <body>

 <?php
   
    $from_date = strtotime($_POST['from_date']);
    $to_date = strtotime($_POST['to_date']);
   
    // sample output
    echo "Today is  : " . date("Y-M-D h:i:sa") . "<br>";
    echo "<br>";
    echo "Human Time: ".$_POST['from_date']. " To ".$_POST['to_date']. "<br>";
    echo "<br>";
    echo "Unix Time  : ".$from_date. " To ".$to_date. "<br>";
    echo "<br>";
    echo "http://www.youtube.com/teguhth" . "<br>";
    echo "http://www.dailymotion.com/teguhth1" . "<br>";
    echo "http://www.metacafe.com/teguhth" . "<br>";
    ?>

     <?php

     //Closing the connection to DB
    $conn->close();
    //set the response content type as JSON
    //header('Content-type: application/json');
    //output the return value of json encode using the echo function.
    //echo json_encode($jsonArray);

 ?>

  </body>
</html>


7. result script
http://teguhtriharto/teguhtriharto.php


8. execute script

Posted by at
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts