JQuery Datepicker 获取选定日期

Posted 2023-05-07

【中文标题】JQuery Datepicker 获取选定日期

【英文标题】：JQuery Datepicker Get Selected Date

【发布时间】：2013-06-21 17:29:03

【问题描述】：

我目前正在使用 2 个单独的 JQuery 日期选择器，我已经修改了格式以便能够通过以存储在后端 mysql 数据库中。

<script>
$(function() 
$( ".datepicker" ).datepicker(
        inline: true,
        showOtherMonths: true,
        dateFormat: 'yy-mm-dd',
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],  
    );
);
</script>

---

我的日期选择器在这里调用

<input type="text" class='datepicker' name="datepicker1" />
<input type="text" class='datepicker' name="datepicker2" />

我一直在尝试让选定的日期通过 ajax 传递给 php。我曾尝试使用 getDate 函数，但运气不佳。

$(".datepicker").datepicker('getDate');

【问题讨论】：

它将返回第一个字段的值，而不是两者

见jsfiddle.net/arunpjohny/DpgLQ/1

【参考方案1】：

因为你有两个元素的类.datepicker，选择器不知道从哪个元素中选择。因此，您必须指定要从中获取日期的输入的名称。

first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');

演示：http://jsfiddle.net/hungerpain/TWmcD/

注意：

val() 不会比使用getDate 更容易吗？您可以在 mysql 本身中格式化您的代码日期，并在客户端为您保存工作。

first = $(".datepicker[name=datepicker1]").val();
second = $(".datepicker[name=datepicker2]").val();

【讨论】：

感谢您的反馈。我使用 val() 然后 getDate()。

【参考方案2】：

$(".datepicker").datepicker( 'getDate' ) 将只返回来自$(".datepicker") 选择器的第一个元素的日期值，在这种情况下它可能是datepicker1。

为了获得这两个输入字段的值，您需要使用

var dfs = $('.datepicker');
var f1 = dfs.filter('[name="datepicker1"]').datepicker( 'getDate' );
var f2 = dfs.filter('[name="datepicker2"]').datepicker( 'getDate' );

演示：Fiddle

【讨论】：

感谢您的反馈，非常感谢！

【参考方案3】：

当您选择日期时，您可以调用另一个 Ajax 函数将所选日期发送到 PHP。

onClose: function( selectedDate ) 
    $.ajax(url: 'test.php', data: date: selectedDate);

【参考方案4】：

使用jquery插件获取日期选择器

 <p>Date:<input type="text" id="datepicker"/></p>
    <script>
    $(function() 
    $( "#datepicker" ).datepicker();
    ); 
    </script>

also see jsfiddle