如何使用pickadate js通過單擊前一天/后一天按鈕來更改日期

Question

我正在使用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/

我是編程新手。 如果您能向我展示解決方法，我將不勝感激。 謝謝堆。

Answer 1

您正在使用的庫沒有內置方法可跳至下一天/前幾天，但是它確實提供了可用於自己創建功能的方法。

單擊下一步/上一個按鈕時，您可以獲取當前選定的日期，然后從中添加或減去一天，如下所示：

 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> 

Answer 2

您必須將click事件添加到前一天/第二天的鏈接。 我不知道這個插件，但是如果有prev / next功能，您可以使用它。 如果不是，則必須從輸入中讀取日期並為其設置下一個/上一個日期。

您可以使用Date對象獲得下一個/上一個日期

var date = new Date(),
    prevDate = date.setDate(date.getDate() - 1),
    nextDate = date.setDate(date.getDate() - 1);