如何从jQuery日期选择器中获取选定的日期

Question

我正在使用jQuery datepicker来显示日历。根据我的需求，我想获取用户选择的日期并存储在我的jQuery变量中，以便在应用程序中使用，但是我无法获取日期...以下是datepicker的代码：

<div id="datepicker"></div>

这里我正在尝试获取选定的代码。。。

$(document).ready(function () {

        $("#datepicker").datepicker({
            onSelect: function (dateText, inst) {
                var date = $(this).val();
                alert(date);
            }
        });

    });

但是，我无法获取日期...请帮助我...谢谢。

- Hansal Mehta

---

可能是重复问题，请查看此链接选择日期 - Prakash R

你的代码在我创建的这个JSBin中完美运行。你的控制台是否出现了任何错误？ - yetti

Answer 1

这应该会起作用

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

虽然很基础，但这里有一个jsfiddle，可以在选择日期后弹出所选日期。

更新以更改日期格式。

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

jsfiddle

第三次更新

$(function() {
    $("#datepicker").datepicker({ 
        dateFormat: "yy-mm-dd", 
        onSelect: function(){
            var selected = $(this).val();
            alert(selected);
        }
    });
});

我在这里使用了更多本地标记来设计日期选择器界面，请尝试一下，看看您是否能得到您想要的警报。

第四次更新

第四次更新

$(function() {
    $("#datepicker").datepicker({ 
        dateFormat: "yy-mm-dd", 
        onSelect: function(){
            var selected = $(this).datepicker("getDate");
            alert(selected);
        }
    });
});

第四种方法使用$(this).datepicker("getDate")而不是$(this).val()，因为$(this).datepicker("getDate")返回一个日期对象，而$(this).val()返回日期字符串。

根据您的需求选择适当的方法。

(在@TimothyC.Quinn评论指出getDate是正确的方法后添加了第四种方法和差异的解释)

- akaBase

---

@HansalMehta 我刚刚添加了一个片段，可以修改日期格式。 - akaBase

很抱歉告诉您，即使我实施了这个，我仍然无法在警报消息中看到任何日期格式的更改。 - Hansal Mehta

@HansalMehta 在查阅日期选择器 API 后刚刚编写了一个最后的片段，尝试一下，也许可以得到你想要的。 - akaBase

这里的问题的正确答案是：https://dev59.com/DoTba4cB1Zd3GeqP-sOR#74368389 - Timothy C. Quinn

@TimothyC.Quinn 如果OP想要一个日期对象，那么这个while循环是正确的。但是根据OP的问题，这并不是必须的。话虽如此，我已经更新了我的答案，包括getDate方法和差异的解释。 - akaBase

Answer 2

虽然问题已经得到解答，但是对于只想要日期对象或以特定格式设置日期的人来说，jQuery 提供了简单的函数。这里是一个可行的jsfiddle示例。

$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });

$("#datepicker").datepicker('setDate', '10-03-2020');
                 // pass string of your format or Date() object

$("#datepicker").datepicker('getDate');
                 // returns Date() object

$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
                 // pass string of your format or Date() object

- It's K

Answer 3

所有代码都是针对Bootstrap日期选择器的

var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)

或者

var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30

if(calendar){
  alert(calendar);
} else {
  alert('null');
}

- Emon Ahmed

Answer 4

尝试

$("#datepicker").datepicker({
     onSelect:function(selectedDate)
     {
          alert(selectedDate);
     }
});

或者

$("#datepicker").datepicker({
     onSelect:function (dateText, inst)
     {
          alert(inst);
     }
});

- Gowri

---

我尝试了这个，但无法获取日期。没有警告消息。 - Hansal Mehta

尝试了这个但没有成功。$(document).ready(function () { $("#datepicker").datepicker({ onSelect: function (selectedDate) { alert(selectedDate); } }); }); - Hansal Mehta

这是你的日期选择器HTML吗？<div id="datepicker"></div> - Gowri

Answer 5

尝试这个。

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
})

如果您有两个class为.datepicker的元素，则选择器将不知道要从哪个元素中选择。因此，您需要指定要获取日期的输入名称。

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

- Ferrakkem Bhuiyan

Answer 6

以下是如何在onSelect事件中从datepicker获取日期对象：

$("#datepickerid").datepicker({
    onSelect: function (dateText, inst) {
        var date_obj = $(this).datepicker('getDate');
    }
});

我觉得很奇怪，onSelect 调用者默认不返回日期对象。

- Timothy C. Quinn

Answer 7

如果您需要特定格式，如'2021/09/28'：

$.datepicker.formatDate('yy/mm/dd', 
    $('.date-picker-2').datepicker("getDate")
); 

- estinamir

---

“试一下”这样的回答并不有用。请添加一些解释。仅有代码的答案对于未来的读者来说不太有用，也没有解释原帖中的错误或如何解决问题的方法。 - nima

Answer 8

您可以使用此处提供的changeDate事件，而不是onSelect事件，然后引用e.date或e.dates。请参见下面的JSON。

HTML：

<div id='QA'></div>    
<div id='datepicker'></div>

JS：

<script type="text/javascript">     
    $(function() {
        $('#datepicker').datepicker({
            clearBtn: true,
            todayHighlight: false,
            multidate: true

        }) .on('changeDate', function(e){
            $('#QA').html(JSON.stringify(e));
        });
    });
    /*
    {  
       "type":"changeDate",
       "date":"2015-08-08T07:00:00.000Z",
       "dates":[  
         "2015-08-08T07:00:00.000Z"
       ],
       "timeStamp":1438803681861,
       "jQuery21409071635671425611":true,
       "isTrigger":3,
       "namespace":"",
       "namespace_re":null,
       "target":{  

       },
       "delegateTarget":{  

       },
       "currentTarget":{  

       },
       "handleObj":{  
         "type":"changeDate",
         "origType":"changeDate",
         "guid":52,
         "namespace":""
       }
    }
    */

</script>

- DanielJRobles

Answer 9

理想的方式是获取日期并将其转换为通用格式，然后利用它（可以传递到服务器或其他地方）。

$("#datepicker").datepicker('getDate').toISOString()

这样它将以ISO标准获取日期。

- BJ Patel