3

I am using pickadate to choose a date. I am trying to change the selected date by clicking the previous day or next day buttons.

    <form method="post">
    <a href="#">previus day</a>
    <input type="text" id="test" data-value="01/11/2017">
    <a href="#">next  day</a>
    <button type="submit">Submit</button>
    </form>

    <script>
    $('#test').pickadate({format: 'dd/mm/yyyy'});
    </script>

Here is the jsfiddle link: https://jsfiddle.net/kdoo53vg/41/

I am newbie at programming. I would appreciate if you can show me the way to do it. Thanks heaps.

Johnny
  • 386
  • 1
  • 3
  • 11

2 Answers2

3

The library you're using does not have built in methods to skip to the next/previous days, however it does expose methods you can use to create the functionality yourself.

On click of the next/prev buttons you can get the currently selected date and then add or subtract a day from it, something like this:

var picker = $('#test').pickadate({
  format: 'dd/mm/yyyy'
}).pickadate('picker');

$('#previous_day, #next_day').click(function(e) {
  e.preventDefault();
  setDate($(this).data('diff'));
})

function setDate(diff) {
  var date = new Date(picker.get('select').pick);
  var newDate = date.setDate(date.getDate() + diff);
  picker.set('select', newDate)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.time.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.date.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/default.time.css" />

<form method="post">
  <a href="#" id="previous_day" data-diff="-1">previous day</a>
  <input type="text" id="test" data-value="01/11/2017">
  <a href="#" id="next_day" data-diff="1">next day</a>
  <button type="submit">Submit</button>
</form>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • wooaw! thank you very much. I will try to implement this although I didn't understand they way of using diff variable here. – Johnny Oct 31 '17 at 12:03
  • 1
    `diff` will hold either `1` or `-1`, as taken from the `data-diff` attribute on the element which was clicked. That value is then added to the current date to shift it along in the required direction. – Rory McCrossan Oct 31 '17 at 12:07
0

You have to add click events to previous/next day links. I don't know this plugin, but if there are functions prev/next, you can use it. If not, you have to read date from input and set next/prev date to it.

You can have next/prev date using Date object

var date = new Date(),
    prevDate = date.setDate(date.getDate() - 1),
    nextDate = date.setDate(date.getDate() - 1);
Sylwek
  • 856
  • 1
  • 9
  • 24