javascript - Datepicker JQUERY 不选择输入日期
问题描述
我有 jquery datepicker 并尝试为计数选择数据。当单击输入时,我会从输入消息 1、aprill、21 中获取日期选择器日历和同时提醒。如果我从 datepicker 中选择日期,我不会从我的函数中得到结果。如果我选择消息日期,我会得到 NaN。所以这意味着我的日期选择器选择不起作用。我该如何解决它。对这个 plagin 我的 HTML 非常厌倦
<input type="text" class="form-control datepicker error-place" name="datepicker" id="datepicker" placeholder="27/04/2021" required data-error="#datepicker">
var datepicker = $("#datepicker").datepicker({
closeText: "Đóng",
prevText: "Trước",
nextText: "Sau",
currentText: "Hôm nay",
monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
weekHeader: "Tuần",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
changeYear: true,
});
和功能
function GetBirthDate() {
var flatpickr;
$("#datepicker").datepicker({
dateFormat: "yy-m-d",
changeMonth: true,
changeYear: true,
onSelect: function (dateText, inst) {
var dt = $.datepicker.parseDate("yy-m-d", dateText);
flatpickr = dt.getFullYear();
console.log("Birth Year: " + flatpickr);
}
});
};
解决方案
回调或日期选择器没有问题。您使用错误的日期格式来解析日期。它应该是 'dd/mm/yy' 而不是 'yy-md'。
代码应如下所示(查看 onSelect 函数):
var datepicker = $("#datepicker").datepicker({
closeText: "Đóng",
prevText: "Trước",
nextText: "Sau",
currentText: "Hôm nay",
monthNames: ["Tháng một", "Tháng hai", "Tháng ba", "Tháng tư", "Tháng năm", "Tháng sáu", "Tháng bảy", "Tháng tám", "Tháng chín", "Tháng mười", "Tháng mười một", "Tháng mười hai"],
monthNamesShort: ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười", "Mười một", "Mười hai"],
dayNames: ["Chủ nhật", "Thứ hai", "Thứ ba", "Thứ tư", "Thứ năm", "Thứ sáu", "Thứ bảy"],
dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"],
dayNamesMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
weekHeader: "Tuần",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
changeYear: true,
onSelect: function(dateText, inst) {
var dt = $.datepicker.parseDate("dd/mm/yy", dateText);
console.log(dt);
flatpickr = dt.getFullYear();
console.log("Birth Year: " + flatpickr);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" class="form-control datepicker error-place" name="datepicker" id="datepicker" placeholder="27/04/2021" required data-error="#datepicker">
推荐阅读
- javascript - Javascript 与 epsilon 相等
- python - AttributeError:“PySide2.QtCore.Qt.Alignment”对象没有属性“testFlag”
- java - 使用 Mockito 模拟嵌套的 Groovy 方法
- java - Spring Rest - 设置没有请求正文的标头
- macos - 在 OSX 中定位 Selenium Safardriver 日志
- sql - 如何计算本月病人入院的天数
- reactjs - React App 错误:找不到模块“react-error-overlay/middleware”
- r - 如何写一个固定宽度的文件?
- jenkins - 运行pabot时如何通过Jenkins向slack输出测试通过/失败通知
- c# - Word 互操作:get_AttachedTemplate() 返回不正确的路径