javascriptpickadate

Disabling time is not working in pickadate.js


I'm trying to integrate pickadate.js on my project but unfortunately after reading the documentation, I'm having difficulty on how I can disable a specific time

$(function() {
    let $timePicker = $('input').pickatime()
  
  let timePicker = $timePicker.pickatime('picker')
  
  timePicker.set('disable', new Date(2021,5,22,9))
  
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.time.css" rel="stylesheet"/>


<input type="time">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.time.js"></script>

. Please see my code below.


Solution

  • hello refer to this you can use arrays formatted [Hours,Minutes] but the problem within your code is that you didnt pass an array as second param to the timepicker set() method . look at the snippet below i edited yours

    timePicker.set('disable', [
    
      // Using a collection of arrays formatted as [HOUR,MINUTES]
      [2,30], [4,30], [9,0],
    
      // Using JavaScript Date objects
      new Date(2015,9,13,6), new Date(2015,9,13,12,30)
    ])
    picker.set('enable', [
      [4,30], [6,0],
      new Date(2015,9,13,9)
    ])
    

    $(function() {
        let $timePicker = $('input').pickatime()
      
      let timePicker = $timePicker.pickatime('picker')
      
      timePicker.set('disable', [new Date(2021,5,22,9)])
      
    })
    <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/themes/classic.time.css" rel="stylesheet"/>
    
    
    <input type="time">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.date.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.6.2/picker.time.js"></script>