Ngu ngơ học làm web (70) - Bài tập về thời gian 2

Tiếp theo của: Ngu ngơ học làm web (69) - Bài tập về thời gian 1
------

Phần 70. Bài tập về thời gian 2


Đây là clip số 60:


So sánh hai ngày bất kì. Ý tưởng là, cho người dùng nhập vào hai ngày, sau đó đổi hai ngày này sang dạng timestamp, thực hiện so sánh hai giá trị timestamp.

Đây là đoạn mã,

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thời gian</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
  <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
  <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#date-start" ).datepicker({ dateFormat: "dd/mm/yy" });
    $( "#date-end" ).datepicker({ dateFormat: "dd/mm/yy" });
  } );
  </script>
</head>
<body>
<?php
  $dateStart = (isset($_POST['date-start'])) ? $_POST['date-start'] : '';
  $dateEnd = (isset($_POST['date-end'])) ? $_POST['date-end'] : '';
?>
  <form action="#" method="post" id="mainForm" name="mainForm">
    <p>Start: <input readonly="readonly" type="text" name="date-start" id="date-start" value="<?php echo $dateStart; ?>"></p>
    <p>End: <input readonly="readonly" type="text" name="date-end" id="date-end" value="<?php echo $dateEnd; ?>"></p>
    <input type="submit" value="Submit">   
  </form>
<?php
  function compareDates($dateStart, $dateEnd) {
    $arrDateStart = date_parse_from_format('d/m/Y',  $dateStart);
    $tsStart = mktime(0, 0, 0, $arrDateStart['month'], $arrDateStart['day'], $arrDateStart['year']);

    $arrDateEnd = date_parse_from_format('d/m/Y',  $dateEnd);
    $tsEnd = mktime(0, 0, 0, $arrDateEnd['month'], $arrDateEnd['day'], $arrDateEnd['year']);
   
    $result = 0;
    if($tsEnd > $tsStart) {
      $result = 1;
    }else if ($tsEnd < $tsStart){
      $result = -1;
    }

    return $result;
  }

  if($dateStart != null && $dateEnd != null) {
    if(compareDates($dateStart, $dateEnd) == 0) {
      echo 'Start = End';
    }else if(compareDates($dateStart, $dateEnd) == 1) {
      echo 'Start < End';
    }else {
      echo 'Start > End';
    }
  }
?>

Đây là clip số 61:


Bài tập: cộng thêm giá trị cho thời gian. Ý tưởng là, cho người dùng nhập vào một giá trị ngày tháng năm bất kì, sau đó cho người dùng nhập một số bất kì và chọn đối tượng sẽ được cộng là ngày, tháng hay năm, cuối cùng thực hiện phép cộng và cập nhật lại giá trị ngày tháng năm.

Đây là đoạn mã,

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thời gian</title>
  <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
  <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
  <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#date" ).datepicker({ dateFormat: "dd/mm/yy" });
  } );
  </script>
</head>
<body>
<?php
    function createSelectbox($name, $attributes, $array, $keySelect) {
      $xhtml = '';

      if(!empty($array)) {
        $xhtml .= '<select name="'.$name.'" id="'.$name.'" style="'.$attributes.'">';
        foreach ($array as $key => $value) {
          if($key == $keySelect) {
            $xhtml .= '<option value="'.$key.'"selected = "selected">'.$value.'</option>'; 
          } else {
            $xhtml .= '<option value="'.$key.'">'.$value.'</option>';
          }
        }
        $xhtml .= '</select>';
      }
      return $xhtml;
     }
    function addTime($date, $format, $type, $value) {
      $arrDate = date_parse_from_format($format, $date);
      switch ($type) {
        case 'Day':
          $ts = mktime(0, 0, 0, $arrDate['month'], $arrDate['day'] + $value, $arrDate['year']);
          break;
        case 'Month':
          $ts = mktime(0, 0, 0, $arrDate['month'] + $value, $arrDate['day'], $arrDate['year']);
          break;
        case 'Year':
        $ts = mktime(0, 0, 0, $arrDate['month'], $arrDate['day'], $arrDate['year'] + $value);
          break;
      }
      $result = date($format, $ts);
      return $result;
    }
    $arrTypes = array('---select type---', 'Day', 'Month', 'Year');
 
    $date     = (isset($_POST['date'])) ? $_POST['date'] : '';
    $type     = (isset($_POST['select-type'])) ? $_POST['select-type'] : '';
    $value    = (isset($_POST['value'])) ? $_POST['value'] : '';

    $strTypes = createSelectbox('select-type', 'width: 150px', $arrTypes, $type);
    $result = addTime($date, 'd/m/Y', $arrTypes[$type], $value);
  
?>
  <form action="#" method="post" id="mainForm" name="mainForm">
    <p>Date: <input readonly="readonly" type="text" name="date" id="date" value="<?php echo $date; ?>"></p>
    <p>Type: <?php echo $strTypes; ?></p>
    <p>Value: <input type="text" name="value" id="value" value="<?php echo $value; ?>"></p>
    <p><?php echo $result; ?></p>
    <input type="submit" value="Submit">   
  </form>
</body>

</html>
-----------
Cập nhật [14/9/2020]
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web