如何从jquery datepicker获取选定的日期

Question

我正在使用 jquery datepicker 来显示日历。现在根据我的要求，我想在我的 jquery 变量中获取用户选择的日期，我将在我的应用程序中使用它，但我无法获取日期..这是日期选择器的代码

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

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

$(document).ready(function () {

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

    });

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

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);
    });
});

提琴手

第三次更新

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

我在这里为datepicker ui 使用了更多的原生标记，试试这个，看看你是否收到了警报。

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

Answer 3

尝试

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

或者

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

Answer 4

尝试这个

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

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

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

Answer 5

您可以使用此处概述的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>

Answer 6

理想的方法是获取日期并将其转换为通用格式并使用相同的格式。 （可能传递到服务器左右。）

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

所以它将获得 ISO 标准中的日期。

Answer 7

所有代码都用于 Bootstrap Datepicker

var calendar = $('#calendar').datepicker("getDate"); // 例如：2021 年 6 月 29 日星期二 00:00:00 GMT+0600（孟加拉国标准时间）

或者

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

如果（日历）{

alert(calendar);

}别的{

   alert('null');

}