CODEWITHSUNDEEP
javascriptjquerydatepickerbootstrap-datetimepicker
Darshana Rana
Darshana Rana

Reputation: 145

Bootstrap datetimepicker with left & right arrow

I want bootstrap datetimepicker like below image,

enter image description here

Where, on left arrow click it will change previous day's date and with next arrow it will show next day's date.

Thanks in advance.

Upvotes: 0

Views: 4266

Answers (1)

noitse
noitse

Reputation: 1045

So you are using jquery date picker with bootstrap design. If I am not wrong, since you haven't provided any source code. If you are using jquery's date picker, you can adjust the next and prev date easily:

HTML

<button id="prev">prev</button>
<input type="text" id="datepicker"/>
<button id="next">next</button>

The Jquery code:

$( "#datepicker" ).datepicker();

$("#prev").click(function(){
    var date = $('#datepicker').datepicker('getDate', '-1d'); 
    date.setDate(date.getDate()-1); 
    $('#datepicker').datepicker('setDate', date);
})


$("#next").click(function(){
        var date = $('#datepicker').datepicker('getDate', '+1d'); 
    date.setDate(date.getDate()+1); 
    $('#datepicker').datepicker('setDate', date);
})

JSFIDDLE https://jsfiddle.net/noitse/r1s0bwm6/

Upvotes: 1

Related Questions