Datepicker JQUERY 不选择输入日期

Posted

技术标签:

【中文标题】Datepicker JQUERY 不选择输入日期【英文标题】:Datepicker JQUERY not select input date 【发布时间】:2021-07-24 07:05:57 【问题描述】:

我有 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);
            
        );
    ;

【问题讨论】:

【参考方案1】:

回调或日期选择器没有问题。 您使用错误的日期格式来解析日期。 它应该是 'dd/mm/yy' 而不是 'yy-m-d'。

代码应该是这样的,(查看 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">

【讨论】:

以上是关于Datepicker JQUERY 不选择输入日期的主要内容,如果未能解决你的问题,请参考以下文章

Jquery Bootstrap Datepicker 禁用过去日期并且不自动填充输入框

带有 jquery datepicker 错误的 jquery 验证插件(请输入有效日期)

jQuery:如何从与 datepicker 插入日期的输入字段不同的元素中激活 datepicker?

JQuery DatePicker,如何突出显示当前输入的日期?

日期选择器:jquery datepicker的使用

日期选择器:jquery datepicker的使用