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

Posted 2023-05-07

【中文标题】如何从 jquery datepicker 中获取选定的日期

【英文标题】：How to get the selected date from jquery datepicker

【发布时间】：2014-12-27 08:43:00

【问题描述】：

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

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

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

$(document).ready(function () 

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

    );

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

【问题讨论】：

可能重复的问题检查此链接[选择日期][1][1]：***.com/questions/11610797/…

您的代码在我创建的JSBin 中运行良好。您的控制台中出现了哪些错误（如果有）？

【参考方案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);
        
    );
);

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

【讨论】：

它的工作谢谢...我有一个关于日期格式的查询..如何将其更改为 yyyy-MM-dd 格式

@HansalMehta 我刚刚添加了一个修改日期格式的 sn-p

很遗憾地告诉您，在实施此操作时，我无法在警报消息中看到日期格式的任何变化

@HansalMehta 我不确定为什么如果你在我的更新下测试第二个 jsfiddle 你可以看到你在警报和文本字段中询问的方式？

是的，我可以在小提琴演示中看到它，但是为什么它在我的位置没有改变

【参考方案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

【参考方案3】：

试试

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

或

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

【讨论】：

我试过了，但无法获取日期。没有警报消息

$(document).ready(function () $("#datepicker").datepicker( onSelect: function (selectedDate) alert(selectedDate); ); ); 试过这个但没有成功

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

【参考方案4】：

试试这个

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

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

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

【参考方案5】：

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

【参考方案6】：

理想的方法是获取日期并将其转换为通用格式并加以利用。 （可能会传递给服务器左右。）

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

所以它会得到 ISO 标准的日期。

【参考方案7】：

所有代码都用于 Bootstrap Datepicker

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

【参考方案8】：

如果您需要特定格式，例如“2021/09/28”：

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

【讨论】：

“试试这个”的答案没有用。meta.***.com/a/298811/4642212 请添加一些解释。仅代码的答案对未来的读者不太有用，并且不能解释 OP 的错误或如何解决问题