How to apply time restriction of 24 hours when we select date and time

Javascript & Ajax
#1

I have table data where I am having input type for date and time separately which you can see below. Now all I need is to give turnaround time to it. Any suggestions please?

<td>
   <div id="tz3">
        <select name="time_zone3[<?php echo $index ?>]">
            <?php
                      for ($i = 0; $i < sizeof($time_zone); $i++) {
                      if ($row_accom['check_in_time'] == $time_zone[$i]) {
                         echo "<option selected value=\"" . $time_zone[$i] . "\">" . $time_zone[$i] . "</option>";
                         } else {echo "<option value=\"" . $time_zone[$i] . "\">" . $time_zone[$i] . "</option>";
                                 }
                              }
                            ?>
                          </select>
                         </div>
                       </td>
#2

In this chkindate is taken in the form of input type tag whereas the time in the format of hrs is being taken from the backend which is stored as: 00:00, 01:00, 02:00, and so on.

#3

Can anybody help me please…

#4

It’s unclear what you are trying to do. In the code it says “select” with “timezones”, in the next post you are talking about “input” and “hours”. Your title says some restriction of 24 hours - 24 hours between what?

#5

Sorry for the confusion that I created. In my database I am storing the date(yyyy-mm-dd) and time(hh:mm), using this date and time I need to give time restrictions.
For Example: If I am travelling on 15th May at 13:00hrs and then if I want to modify it today on 14th May I must not be able to, it must give some message or anything.
As of now I am fetching the entire row using SELECT query, now using this date and time I need to calculate the difference.

#6 
(new DateTime("{$date} {$time}"))->modify('+24 hours') < (new DateTime())
#7 
$departureDate = strtotime($row_travel['departure_date']);
$todayDate = strtotime(Date('Y-m-d')); 
$diff =  ($departureDate - $todayDate)/60/60/24; 
if($diff < 1){
 $checkDate = "readonly";
 $Date_function = "";
  }else{
   $Date_function = 'id="assigned_date"';
   }

In php this is how I am doing. I am using this $checkDate in the input type which I want to disable. Its working now but another issue is when I click on insert row I am able to edit the date which should not happen. As You can see in image that when i click on insert row the departure row should not be editable.

travel%20img
travel%20img957×264 7.33 KB

#8 
function addRow(tbl_travel) {
     var $j = jQuery.noConflict();
      $j(".last_date").datepicker("destroy");
      $j(".assigned_date").datepicker("destroy");
      var table = document.getElementById(tbl_travel);
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
      var colCount = table.rows[2].cells.length;
      for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[2].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[2].type) {
          case "text":
              newcell.childNodes[2].value = "";
              break;
          case "checkbox":
              newcell.childNodes[2].checked = false;
              break;
          case "select-one":
              newcell.childNodes[2].selectedIndex = 2;
              break;                  
        }
      }
    var dateAssignedId = Math.round(new Date().getTime() + (Math.random() * 100));
    var dateDueId = Math.round(new Date().getTime() + (Math.random() * 100));
      $(row).find('.assigned_date')[0].id = dateAssignedId; 
      $(row).find('.last_date')[0].id = dateDueId;
      
      $j(".assigned_date").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: new Date()
    });
      $j(".last_date").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: new Date()
    });
    }

This is my Insert row js function

#9

is this the default jquery datepicker? Then you can set a max date

http://api.jqueryui.com/datepicker/#option-maxDate

You can set a DateTime by prefixing a unix timestamp like @123456789

#10

I am not getting you. I tried using maxDate but still when I insert row I am able to edit the prev row date(Departure).

#11

travel1
travel11152×648 17.7 KB

This is how I am getting now. I want is that I must not be able to change or choose datepicker if date is in past.
In the next created row even I am getting the same datepicker form as shown in image

#12

I still don’t get what you want, you are mixing up application levels. So do you need a check in PHP or JS? If it’s for PHP - what i would recommend for any validation - then you can stick to the DateTime class which ist mostly human readably

$now = (new DateTime()
$anypointintime = new DateTime("@{$timestamp}")
if($anypointintime->modify('+24 hours') < $now){ ready or not } // your condition
#13

Basically in that Travel, Date and Time table data as you can see I need to disable the Departure date if it is in the past. Now when I click on Insert Row table data will be created where I must be able to change the departure date (of newly created row) but I must not be able to do with the earlier inserted row (if date is in the past).
As of now, in PHP(as shown in the previous code) i have done it and it is disabling the Departure date but when I click on the Insert row I am able to edit the previous Departure date which should not be allowed.

#14

what is an “insert row”? You can deactivate HTML inputs with setting disabled="disabled" or readonly="readonly"

#15

It is an javascript function to add/delete row as you can see in the above images. its respective js function even i have shown above i.e., function addRow(tbl_travel){...}

#16

The readonly that you are saying its done using PHP like this
$checkDate = "readonly";
and this variable $checkDate is used in the html input type as
<input type="text" name="travel_det[dep_date][]" value="<?php echo $row_travel['departure_date']; ?>" class="assigned_date" <?php echo $Date_function." ".$checkDate; ?>/>

#17

Hi All,
I was able to do it i.e., disabling date if the dates are in past but now I am facing another issue, hope some one can help me

Sponsor our Newsletter | Privacy Policy | Terms of Service