我正在尝试使用Datepicker选择一个日期,然后再显示该日期减去一天。
例如,在下面的代码中,我希望用户能够选择“ 2020年3月15日,星期日”,但是我想在点击“显示”后显示“ 2020年3月14日,星期六”。按钮。
我很难找到答案。任何帮助将不胜感激!
$(function() {
$("#datepicker").datepicker({
dateFormat: "DD, MM d, yy",
minDate: 0,
});
});
function showDate() {
var dateOptions = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
};
var selectedDate = $("#datepicker").datepicker("getDate");
var currentLanguage = $("#language option:selected").val();
var dateClass = document.getElementsByClassName("date");
for (var i = 0; i < dateClass.length; i++) {
dateClass[i].innerHTML = selectedDate.toLocaleDateString(currentLanguage, dateOptions);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table>
<tr>
<td>Please select the event date.</td>
<td> <input type="text" id="datepicker" size="30" autocomplete="off"></td>
</tr>
</table>
<button onclick="showDate()">Show Date/button</button>
<p>Please send the notice on <span class="date"></span>.</p>
答案 0 :(得分:1)
添加此行
var dt = new Date(selectedDate);
dt.setDate( dt.getDate() - 1 );
and replace this:
dateClass[i].innerHTML = dt.toLocaleDateString(currentLanguage, dateOptions);
function showDate() {
var dateOptions = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
};
var selectedDate = $("#datepicker").datepicker("getDate");
var dt = new Date(selectedDate);
dt.setDate( dt.getDate() - 1 );
var currentLanguage = $("#language option:selected").val();
var dateClass = document.getElementsByClassName("date");
for (var i = 0; i < dateClass.length; i++) {
dateClass[i].innerHTML = dt.toLocaleDateString(currentLanguage, dateOptions);
}
}
答案 1 :(得分:1)
通常,我总是喜欢香草JS方法,但是在日期/时间处理方面,我确实不能像moment.js一样推荐Shaun said。
在这种情况下,subtract(1, 'd')
将完成工作,而.format('LL')
将输出对区域设置敏感的用户友好输出。
$(function() {
$("#datepicker").datepicker({
dateFormat: "DD, MM d, yy",
minDate: 0,
});
});
function showDate() {
var dateOptions = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric"
};
var selectedDate = $("#datepicker").datepicker("getDate");
var currentLanguage = $("#language option:selected").val();
var dateClass = document.getElementsByClassName("date");
for (var i = 0; i < dateClass.length; i++) {
dateClass[i].innerHTML = moment(selectedDate).subtract(1, 'd').format('LL');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table>
<tr>
<td>Please select the event date.</td>
<td> <input type="text" id="datepicker" size="30" autocomplete="off"></td>
</tr>
</table>
<button onclick="showDate()">Show Date/button</button>
<p>Please send the notice on <span class="date"></span>.</p>