从 JQUERY 日期选择器中获取价值

Posted 2023-05-07

【中文标题】从 JQUERY 日期选择器中获取价值

【英文标题】：Getting value from JQUERY datepicker

【发布时间】：2011-12-30 03:10:59

【问题描述】：

如果我想通过将 JQUERY UI 日期选择器附加到像 $("div#someID").datepicker() 这样的 DIV 来内联显示 JQUERY UI 日期选择器 - 如何访问所选日期？我假设如果它没有绑定到INPUT，那么它将不会与表单一起提交。

我想作为后续，如果我需要将它绑定到 INPUT 元素，有没有办法控制日期选择器相对于 INPUT 元素的定位？如果我希望日期选择器出现在元素的上方或侧面而不是下方，我该怎么做？

如果这个答案真的很明显，请原谅我。

【参考方案1】：

如果你想获取用户选择的日期，你可以这样做：

$("#datepicker").datepicker(
    onSelect: function()  
        var dateObject = $(this).datepicker('getDate'); 
    
);

我不确定您问题的第二部分。但是，您是否尝试过使用样式表和相对定位？

【讨论】：

谢谢！我不敢相信我在浏览文档时以某种方式错过了“getDate”！我想我可能不得不乱用他们的样式表，但我总是对破解别人做过的任何事情感到紧张。

如何解析日期"Wed Nov 08 2017 18:20:28 GMT+0100 (W. Europe Standard Time)"？

请确保您考虑到日期以 localtime 而非 UTC() 形式返回。要将日期设为 UTC，请使用 Date.UTC( dateObject.getFullYear(), dateObject.getMonth(), dateObject.getDate() );

【参考方案2】：

您可以使用getDate 方法：

var d = $('div#someID').datepicker('getDate');

这将为您提供 d 中的 Date 对象。

没有任何options for positioning 弹出窗口，但如有必要，您可以使用 CSS 或beforeShow 事件来做一些事情。

【参考方案3】：

$('div#someID').datepicker(
   onSelect: function(dateText, inst)  alert(dateText); 
);

你必须只将它绑定到输入元素

【讨论】：

***.com/questions/662220/…希望对你有帮助

【参考方案4】：

您可以删除此输入的名称属性，因此不会提交。

要访问这个控件的值：

$("div#someID").datepicker( "getDate" )

您可以查看http://jqueryui.com/demos/datepicker/中的文档

【讨论】：

谢谢！我不敢相信我在浏览文档时以某种方式错过了“getDate”！

【参考方案5】：

您可以按以下方式进行 - 验证只是为了确保日期选择器绑定到元素。

var dt;

if ($("div#someID").is('.hasDatepicker')) 
    dt = $("div#someID").datepicker('getDate');

【参考方案6】：

如果你选择的元素不是一个，你需要这样使用：

$('[type="date"]').datepicker();
$('[type="date"]').change(function() 
    var date = $(this).datepicker("getDate");
    console.log(date);
);

【参考方案7】：

你也可以试试这个。

$('#datepickerID').val();

这是最简单的方法。

【讨论】：

你能再解释一下吗？

#datepickerID 部分是包含所选日期的文本字段的 ID，而 .val() 是一个获取该文本字段中的值（日期）的函数。因此，如果我从日期选择器中选择 09/01/2020，该值将进入我的文本字段。上面的代码获取了选择的日期。

但这将以字符串格式返回日期。在本地化的情况下，这个云是一个问题

【参考方案8】：

查看标签输入 示例：

<div class="input-group date" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input form-control-sm" data-target="#dt_expdate" id="dt_expdate" />
                        <div class="input-group-append" data-target="#dt_expdate" data-toggle="datetimepicker">
                            <div class="input-group-text form-control-sm"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>

获取和赋值的权限

id="dt_expdate"

获取价值：

var date= $("#dt_expdate").val();

赋值：

$("#dt_expdate").val('20/08/2020');

【参考方案9】：

要将日期选择器放置在输入字段旁边，您可以使用以下代码。

$('#datepicker').datepicker(
    beforeShow: function(input, inst)
    
        inst.dpDiv.css(marginLeft: input.offsetWidth + 'px');
    
);

【参考方案10】：

我需要为允许用户选择日期范围的销售报告执行此操作。该解决方案类似于另一个答案，但我想提供我的示例只是为了向您展示我将其应用于的实际实际用途：

var reportHeader = `Product Sales History Report for $$('#FromDate').val() to $$('#ToDate').val().` ;
```