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.
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>
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.