CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptimepicker
Sebastian Corneliu Vîrlan
Sebastian Corneliu Vîrlan

Reputation: 1700

Bootstrap timepicker add hours to default time

I am using bootstrap-timepicker (https://jdewit.github.io/bootstrap-timepicker/) for 2 inputs: start_date and end_date. As I see the start date has a default and is the closest :00 or :30 minute. I want the end_date to have by default the closest :00 or :30 minute + 1 hour. How can I achieve this?

    $('.timepicker-input-end').timepicker({
        showInputs: false,
        defaultTime: ????
    });

Upvotes: 2

Views: 6702

Answers (3)

Sebastian Corneliu Vîrlan
Sebastian Corneliu Vîrlan

Reputation: 1700

I fount this the simplest solution, I forgot that fullcalendar library use moment.

    $('.timepicker-input-end').timepicker({
        showInputs: false,
        defaultTime: moment($('input[name="appointment[start_time]"]').val(), "hh:mm TT").add(30, 'minutes').format("hh:mm A")
    });

What do you think?

Upvotes: 1

George G
George G

Reputation: 7695

It should be simple if you have javascript date object:

var defDate = new Date ();
// you can do 00 or 30 min logic here
defDate.setHours(defDate.getHours() + 1);
$('.timepicker-input-end').timepicker({
    showInputs: false,
    defaultTime: defDate.toString("hh:mm tt")
});

Update: because you use timepicker with 12 hour format you can use datejs to convert time easily.

Upvotes: 3

black_pottery_beauty
black_pottery_beauty

Reputation: 879

var currentDate = new Date();
        var day = currentDate.getDate();
        var month = currentDate.getMonth() + 1;
        var year = currentDate.getFullYear();
        todayDateReport = year + "-" + month + "-" + day;
        $("#currentDate").html(todayDateReport);
        startDate = todayDateReport + " 00:00:00";
        endDate =   todayDateReport + " 01:00:00";

        $("#startDateInput").val(startDate);
        $("#endDateInput").val(endDate);
$('#startDate').datetimepicker({
         format: 'YYYY-MM-DD HH:mm:ss',
         collapse:false,
         sideBySide:true,
         useCurrent:false,
         showClose:true,
         maxDate : currentDate
     });

     $('#endDate').datetimepicker({
         format: 'YYYY-MM-DD HH:mm:ss',
         collapse:false,
         sideBySide:true,
         useCurrent:false,
         showClose:true,
     });

Upvotes: 0

Related Questions