CODEWITHSUNDEEP
javascriptreactjsdatemeteordatepicker
Kane
Kane

Reputation: 615

Gijgo DateTimePicker past date disable

I have used Gijgo DateTimePicker in my meteor app using by react. It's working well. Now I am trying to disable all past date. I have found disableDates option in this docs. But there is an option to disable a specific date. How do I disable all past date using datetimepicker? Because I need date and time both.

Gijgo Example : 1

<input id="datepicker" width="312" />
 <script>
    $('#datepicker').datepicker({
        value: '11/10/2017',
        disableDates: [new Date(2017,10,11), '11/12/2017']
    });
 </script>

Gijgo Example : 2 

 <script>
    $('#datepicker').datepicker({
        value: '11/11/2017',
        disableDates:  function (date) {
            var disabled = [10,15,20,25];
            if (disabled.indexOf(date.getDate()) == -1 ) {
                return true;
            } else {
                return false;
            }
        }
    });
 </script>

My Code:

 $("#dateTime").datetimepicker({
            format: "ddd, mmm d, yyyy h:MM TT",
            uiLibrary: "bootstrap4",
            iconsLibrary: "fontawesome",
            modal: true,
            footer: true,
            //value: "03/01/2019",
            disableDates: function(date) {
                const currentDate = new Date();
                return date > currentDate ? true : false;
            }
        });

Upvotes: 2

Views: 4126

Answers (1)

Prakash Kandel
Prakash Kandel

Reputation: 1043

You can disable the past date by doing something like

        $('#datetimepicker').datetimepicker({
        datepicker: { 
         disableDates:  function (date) {
            const currentDate = new Date();
            return date > currentDate ? true : false;
        }
        }

    });

dateDisable function will compare every date that displays in current date picker window and decide whether to disable or not by checking the return value.

If you want to allow for the current Day do the following

    $('#datepicker').datetimepicker({
    datepicker: {
    disableDates:  function (date) {
    // allow for today
     const currentDate = new Date().setHours(0,0,0,0);
     return date.setHours(0,0,0,0) >= currentDate ? true : false;
    }},

});


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body style="padding: 8px;">
 <input id="datetimepicker" width="312" />
 <script>
    $('#datetimepicker').datetimepicker({
        datepicker: {
        disableDates:  function (date) {
            const currentDate = new Date();
	    return date > currentDate ? true : false;
        }
        }
    });
 </script>
</body>
</html>

Upvotes: 2

Related Questions