Search code examples
javascriptjquerydatetimedisabled-input

How to disable current date by time?


I have used input date type in my website. I want to disable current date by time.

For example

After 12:00:00 PM current date 2018-04-16 disabled.

I tried this code:

<!-- disable past date -->
$(function() {
  var dtToday = new Date();

  var month = dtToday.getMonth() + 1;
  var day = dtToday.getDate();
  var year = dtToday.getFullYear();
  if (month < 10)
    month = '0' + month.toString();
  if (day < 10)
    day = '0' + day.toString();

  var maxDate = year + '-' + month + '-' + day;
  //console.log(maxDate);
  $('#demo_date').attr('min', maxDate);
  $('#demo_date').attr('max', '2018-04-29');
});
<!-- disable past date -->

<!-- disable date by time -->
$(document).ready(function() {
  var time = new Date().toLocaleTimeString();
  if (time <= '12:00:00 PM') {

    // code for disable demo_date
  }
});

<!-- disable date by time -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input placeholder="Select Date" class="textbox-n" type="text" name="demo_date" onfocus="(this.type='date')" id="demo_date">


Solution

  • Ok you got it. I have made a demo for you here you will not able to select the current date after 12:00 pm. Cheers....

    $(function() {
      var dtToday = new Date();
    
      var month = dtToday.getMonth() + 1;
      var day = dtToday.getDate();
      var year = dtToday.getFullYear();
     
     
      if (month < 10)
        month = '0' + month.toString();
      if (day < 10)
        day = '0' + day.toString();
    
      var maxDate = year + '-' + month + '-' + day;
      //console.log(maxDate);
     
       var time = new Date().toLocaleTimeString();
      if (time >= '12:00:00 PM') {
     day = day+1
     maxDate = year + '-' + month + '-' + day;
        // code for disable demo_date
      }
     
      
      
      $('#demo_date').attr('min', maxDate);
      $('#demo_date').attr('max', '2018-04-29');
    });
    <!-- disable past date -->
    
    <!-- disable date by time -->
    $(document).ready(function() {
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input placeholder="Select Date" class="textbox-n" type="text" name="demo_date" onfocus="(this.type='date')" id="demo_date">