[英]How to get next month Previous month in Bootstrap date picker instead of next previous icon?
I am using bootstrap datepicker & I want to change display next month & previous month instead of arrows.我正在使用引导程序日期选择器,我想更改下个月和上个月的显示而不是箭头。 I have done some functionality but is not working accurately...我已经完成了一些功能,但工作不准确......
$(document).ready(function() { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; $('#datepicker').datepicker({ inline: true, todayHighlight: true, }).on('changeDate', function(e) { $('#dt_due').val(e.format('dd/mm/yyyy')); }).on('changeMonth', function(e) { var prevMonth = new Date(e.date).getMonth()-1; console.log(prevMonth); prevMonth > 12 ? prevMonth = 0 : prevMonth; var currMonth = new Date(e.date).getMonth(); console.log(currMonth); $('.pickDate').find('table .prev').html(monthNames[prevMonth]); var nextMonth = new Date(e.date).getMonth() + 1; console.log(nextMonth); nextMonth > 12 ? nextMonth = 0 : nextMonth; $('.pickDate').find('table .next').html(monthNames[nextMonth]); $('#dt_due').val(e.format('dd/mm/yyyy')); }); function getInitMonths() { var prevMonth = new Date().getMonth(); console.log(prevMonth); var currMonth = new Date().getMonth() + 1; console.log(currMonth); console.log(monthNames[currMonth - 1]) $('.pickDate').find('table .prev').html(monthNames[currMonth - 2]); var nextMonth = new Date().getMonth() + 2; console.log(nextMonth); nextMonth > 12 ? nextMonth = 0 : nextMonth; $('.pickDate').find('table .next').html(monthNames[nextMonth]); } getInitMonths(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <div id="datepicker" class="pickDate"></div>
How can I do that?我怎样才能做到这一点?
Note:- Issue comes when month is December, January...注意:- 问题出现在月份是 12 月、1 月...
Please Help/suggest to me...请帮助/建议给我...
You need to define the implementation of
getInitMonths()
outside thedocument.ready
.您需要在document.ready
之外定义getInitMonths()
的实现。
Here is the JSFiddle running without errors.这是运行没有错误的JSFiddle 。
$(document).ready(function() { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; $('#datepicker').datepicker({ inline: true, todayHighlight: true, }).on('changeDate', function(e) { $('#dt_due').val(e.format('dd/mm/yyyy')); }).on('changeMonth', function(e) { var prevMonth = new Date(e.date).getMonth()-1; console.log(prevMonth); prevMonth > 12 ? prevMonth = 0 : prevMonth; var currMonth = new Date(e.date).getMonth(); console.log(currMonth); $('.pickDate').find('table .prev').html(monthNames[prevMonth]); var nextMonth = new Date(e.date).getMonth() + 1; console.log(nextMonth); nextMonth > 12 ? nextMonth = 0 : nextMonth; $('.pickDate').find('table .next').html(monthNames[nextMonth]); $('#dt_due').val(e.format('dd/mm/yyyy')); }); function getInitMonths() { var prevMonth = new Date().getMonth(); console.log(prevMonth); var currMonth = new Date().getMonth() + 1; console.log(currMonth); console.log(monthNames[currMonth - 1]) $('.pickDate').find('table .prev').html(monthNames[currMonth - 2]); var nextMonth = new Date().getMonth() + 2; console.log(nextMonth); nextMonth > 12 ? nextMonth = 0 : nextMonth; $('.pickDate').find('table .next').html(monthNames[nextMonth]); } getInitMonths(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <div id="datepicker" class="pickDate"></div>
$(document).ready(function() { var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM'); var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM'); var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; $('#datepicker').datepicker({ inline: true, todayHighlight: true, }).on('changeDate', function(e) { $('#dt_due').val(e.format('dd/mm/yyyy')); }).on('changeMonth', function(e) { var monthMinusOneName = moment(e.date).subtract(1, "month").startOf("month").format('MMMM'); var monthPlusOneName = moment(e.date).add(1, "month").startOf("month").format('MMMM'); $('.pickDate').find('table .prev').html(monthMinusOneName); $('.pickDate').find('table .next').html(monthPlusOneName); }); function onInit() { var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM'); var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM'); $('.pickDate').find('table .prev').html(monthMinusOneName); $('.pickDate').find('table .next').html(monthPlusOneName); } onInit() })
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> <script src="https://momentjs.com/downloads/moment.min.js"></script> <div id="datepicker" class="pickDate"></div>
Note:- I have added moment js for next month & previous month's name.注意:- 我为下个月和上个月的名称添加了时刻 js。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.