There may be times when you need to display client’s time and not the one on the server. The most common example is when you are showing deadlines using a timer. Showing local time may not be a necessity but it improves the user experience. Also, in certain scenarios like form submission deadlines, it would be a good practice to show time left according to the client’s timezone and not the server’s time.

PHP vs. Javascript

PHP is a server-side language so anything coded in PHP will be executed on the server. Whenever it comes to client-side, the best solution is Javascript. I’ll simply show you the code that worked for me and some of the issues that mostly arise.

First of all, I needed to access the date from PHP and Javascript both. Hence, I used a hidden field to store value.

<input type="hidden" name="datevar" id="datevar" value='<?php echo $dt?>' />

Now, whenever I wanted the date variable, I just needed to access $dt.

Let’s set the date to the local date.

 var x=new Date();
 document.getElementById("datevar").value=x.toString();

Note that before assigning the value of the date variable, I converted it to string. If you directly assign the date variable to hidden field datevar, ISO time is stored and not the local time. Gave me a headache for hours!!

Check local time and disable textbox after 24 hours

I had a textbox where a student can enter his portfolio link. But once the student enters the link, he can update it for 24 hours only and not after that. The textbox is disabled after that. I am listing the code snippets below.

$error_message='';
$lnk='';
$dt='';
$flag=false;
// check user login
if(empty($_SESSION['user_id']))
{
    header("Location: index.php");
}
// $user contains the user data that was fetched when the user logged in.
if(!empty($user->LinkDate)){
 // Gets the date and time of when the user added the link.  
    $dt=$user->LinkDate;
}
if(!empty($user->PortfolioLink)){
// Assigns the portfolio link of the user to the textbox
    $lnk=$user->PortfolioLink;
}
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
if (isset($_POST['btnSubmit'])){
   // Code to update portfolio link
}
}
?>

<article>
 <h2>Upload Portfolio Link</h2>
            
        <div>
            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" onsubmit="return validateForm()">
            <label for="password">Enter Portfolio Link</label>
            <input name="pflink" id='pflink' class="big" placeholder="Portfolio Link" value="<?php echo $lnk?>" required>
             <label id="lblMessage"></label>
             <button type="submit" id="btnSubmit" name="btnSubmit" class="standard-button" value="submit">Submit</button>
             <input type="hidden" name="datevar" id="datevar" value='<?php echo $dt?>' />
                </form>
                </div>
</article>
<script>
// This function checks whether the current time is equal to or greater than the datetime stored in hidden field.
// If current time is less than or equal to the hidden field value, submission of form is not done.
// Hidden field contains the the datetime value that 24 hours more than when the link was added.
    function validateForm() {
    var timeDiff = (Date.parse(document.getElementById("datevar").value) - new Date().getTime());
if(timeDiff<=0){
    alert("Updation is not allowed.");
   return false;
    }
} 
    // If the value of hidden field is not set, set it to tomorrow's datetime.
var hdn=document.getElementById("datevar");
    if(hdn.value==''){
    var x=new Date(new Date().getTime()+ (24*60*60*1000));
    document.getElementById("datevar").value=x.toString();}
    else{
     setMessage();   
    }   
 var dt=hdn.value;
// Convert the string in hidden field to date
  var date1=new Date(dt);
// Disable textbox if the link has been added for more than 24 hours
    if(date1<=new Date()){
      document.getElementById('pflink').disabled=true;}
    
// Sets the message below textbox stating the time remaining to update the link.
    function setMessage(){
// Check the difference in hours.
        var timeDiff = ((Date.parse(document.getElementById("datevar").value))/(1000*60*60) - (new Date().getTime())/(1000*60*60));
var diffDays = Math.floor(timeDiff); 
        if(diffDays<0){
            document.getElementById("lblMessage").innerHTML="Updation of Portfolio link is not allowed now.";
        }else if(diffDays==0){
// No hours and hence check the minutes difference.
            var minDiff = Math.floor(((Date.parse(document.getElementById("datevar").value))/(1000*60) - (new Date().getTime())/(1000*60)));
            document.getElementById("lblMessage").innerHTML="You can update your portfolio for next "+minDiff+ (minDiff==1?" minute":" minutes")+". Updation of the portfolio link will not be allowed after that.";
        }else{
             document.getElementById("lblMessage").innerHTML="You can update your portfolio for next "+diffDays+ (diffDays==1?" hour":" hours")+". Updation of the portfolio link will not be allowed after that."
        }
    }
</script>

So, this is the code that will allow updating of the link only for 24 hours and disable textbox after that. And it also displays an appropriate message to the user. Just hope that this will save someone a day’s work.

%d bloggers like this: