[英]Replace Next and Previous Month by Next And previous Day in datepicker using Bootstsrap Jquery
我有一个 jquery 引导 datepicker 内联,我想增加和减少当天我尝试这个:
// Html Code
<div id="datepicker"></div>
// JS Code
$('#datepicker').datepicker({
todayHighlight: true,
language: 'en',
});
$('.btn-next').on("click", function () {
var currentDate = $('#datepicker').datepicker('getDate');
var selectedDate= new Date(currentDate);
// Increase current day by +1
selectedDate.setDate(selectedDate.getDate() + 1);
$('#datepicker').datepicker('update',selectedDate);
});
$('.btn-prev').on("click", function () {
var currentDate = $('#datepicker').datepicker('getDate');
var selectedDate= new Date(currentDate);
// Decrease current day by -1
selectedDate.setDate(selectedDate.getDate() - 1);
$('#datepicker').datepicker('update',selectedDate);
});
但它不再起作用了,这个运营商的任何想法
您不需要再次转换从 datepicker 获得的日期,只需+1
或-1
即可,并在 datepicker 中添加新值。
演示代码:
$('#datepicker').datepicker({ todayHighlight: true, language: 'en', }); $('.btn-next').on("click", function() { var currentDate = $('#datepicker').datepicker('getDate'); currentDate.setDate(currentDate.getDate() + 1); $('#datepicker').datepicker('update', currentDate); }); $('.btn-prev').on("click", function() { var currentDate = $('#datepicker').datepicker('getDate'); currentDate.setDate(currentDate.getDate() - 1); $('#datepicker').datepicker('update', currentDate); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha256-bqVeqGdJ7h/lYPq6xrPv/YGzMEb6dNxlfiTUHSgRCp8=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha256-siyOpF/pBWUPgIcQi17TLBkjvNgNQArcmwJB8YvkAgg=" crossorigin="anonymous" /> <input type="text" id="datepicker"> <button class="btn-prev">Prev</button> <button class="btn-next">Next</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.