CODEWITHSUNDEEP
jqueryjquery-ui
Stranger
Stranger

Reputation: 10610

Restrict time in jQuery timepicker dynamically?

I am having two fields in my form. One is date field which is using jQuery date picker and another one is jQuery time picker. Now the problem is, if i select the today's date in the date field, then the time picker should not shows the past time. For eg. if the time now is 17:00 hrs, then the timepicker should not shows the time before 17:00 hrs as selectable. Here is my code,

$(function() {
    $( ".datepicker" ).datepicker({minDate:'0'});
    $('.timepicker').timepicker();
});

$("#date").click(function(){
    if($("#date").val()=='04/17/2012')
    {
        updatetimefortoday();
    }
});![enter image description here][1]

function updatetimefortoday()
{
    $('.timepicker').timepicker({
        onHourShow: timepickerRestrictHours
    });

    function timepickerRestrictHours(hour)
    {
        if ((hour > 17))
        {
            return true;
        }
        return false;
    }
}

Now the problem is if we call the function updatetimefortoday() on document.ready, it is showing the timepicker correctly. But if we do it on click of the date field as shown in the code it is not working.

enter image description here

This is the expected output after selecting the date.

Upvotes: 2

Views: 13807

Answers (5)

KamleshNishad
KamleshNishad

Reputation: 24

You can use this one - 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
            <div class="demo-section k-content">

                <h4>Start time</h4>
                <input id="start" value="8:00 AM" style="width: 100%;" />

                <h4 style="margin-top: 2em;">End time</h4>
                <input id="end" value="8:30 AM" style="width: 100%;" />

            </div>
            <script>
                $(document).ready(function() {
                    function startChange() {
                        var startTime = start.value();

                        if (startTime) {
                            startTime = new Date(startTime);

                            end.max(startTime);

                            startTime.setMinutes(startTime.getMinutes() + this.options.interval);

                            end.min(startTime);
                            end.value(startTime);
                        }
                    }

                    //init start timepicker
                    var start = $("#start").kendoTimePicker({
                        change: startChange
                    }).data("kendoTimePicker");

                    //init end timepicker
                    var end = $("#end").kendoTimePicker().data("kendoTimePicker");

                    //define min/max range
                    start.min("8:00 AM");
                    start.max("6:00 PM");

                    //define min/max range
                    end.min("8:00 AM");
                    end.max("7:30 AM");
                });
            </script>

            <style>

            </style>
        </div>

</body>
</html>

Upvotes: 0

Ayush Srivastava
Ayush Srivastava

Reputation: 95

    <script>
        $(function() {
        $( ".datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true,
          minDate: 0
        });
        });

        $(function() {
        $( ".timepicker" ).timepicker({
            minTime: { hour: new Date().getHours(), minute: new Date().getMinutes() },
        });
        });

    </script>

Dont forget these:

    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script src="https://raw.githubusercontent.com/fgelinas/timepicker/master/jquery.ui.timepicker.js"></script>

Upvotes: 0

Francois Gelinas
Francois Gelinas

Reputation: 611

After working a bit more with it, I came to the conclusion that the best way to do that is to always call the onHourShow function and validate the selected date in that function. I think this is better because the disabled hours are still visible to the user instead of blank cells.

$('#date').datepicker({
    minDate: 0
});
$('#time').timepicker({
    onHourShow: function( hour ) { 
        var now = new Date();
        // compare selected date with today
        if ( $('#date').val() == $.datepicker.formatDate ( 'mm/dd/yy', now ) ) {
            if ( hour <= now.getHours() ) {
                return false;
            }
        }
        return true;
    }
});​

here is a working example : http://jsfiddle.net/fgelinas/kUFgT/4/

As for the start and end hours problem reported by Aymad Safadi, I will see what I can do, this is definitely a bug.

Upvotes: 5

Ayman Safadi
Ayman Safadi

Reputation: 11552

Try @FrancoisGelinas' approach (which is the standard jQuery UI way of doing it), only use the library's options. In this case: "hours".

Something like:

$('.datepicker').datepicker({
    minDate:'0',
    onSelect: function()
    {

        if($("#date").val()=='04/18/2012')
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 05, ends: 23});
        }
        else
        {
            $('.timepicker').timepicker( 'option', 'hours', {starts: 0, ends: 23});
        }
    }
});
$('.timepicker').timepicker();​

Demo here: http://jsfiddle.net/JbjLg/

That said, there seems to be a bug with the timepicker library itself. If you pick a "start" hour greater than 11, all the hours will disappear. I would strongly suggest you look into this and notify the auther about it, either via email or as an issue on his GitHub site.

Upvotes: 0

Francois Gelinas
Francois Gelinas

Reputation: 611

The timepicker is already attached to the input from the document ready function. I think you can change the onHourShow property this way instead : 

$('.timepicker').timepicker( 'option', 'onHourShow', timepickerRestrictHours);

Upvotes: 0

Related Questions