如何通过使用pickadate js单击上一个/下一个按钮来更改日期

时间:2017-10-31 11:08:37

标签: javascript jquery date calendar pickadate

我正在使用pickadate来选择日期。我想通过点击前一天或第二天按钮来更改所选日期

    <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>

以下是jsfiddle链接:https://jsfiddle.net/kdoo53vg/41/

我是编程的新手。如果你能告诉我这样做的话,我将不胜感激。谢谢你。

2 个答案:

答案 0 :(得分:2)

您正在使用的库没有内置方法可以跳到下一个/前几天,但是它确实公开了您可以用来自己创建功能的方法。

点击下一个/上一个按钮,您可以获得当前选择的日期,然后从中添加或减去一天,如下所示:

&#13;
&#13;
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)
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您必须将click个事件添加到上一个/下一个日期的链接中。我不知道这个插件,但如果有prev / next函数,你可以使用它。如果没有,您必须从输入中读取日期并设置下一个/上一个日期。

您可以使用日期对象

获得下一个/上一个日期
var date = new Date(),
    prevDate = date.setDate(date.getDate() - 1),
    nextDate = date.setDate(date.getDate() - 1);