使用 Jquery Datepicker 获取日期

Posted 2023-05-07

技术标签:

【中文标题】使用 Jquery Datepicker 获取日期【英文标题】：getDate with Jquery Datepicker 【发布时间】：2011-02-03 12:20:36 【问题描述】：

我正在尝试从我的 jquery 日期选择器实现中获取日期，将其添加到字符串中并在我的 div 中显示结果图像。然而，有些东西是行不通的。任何人都可以检查代码并查看它吗？

该代码应该从日期选择器中获取日期，将其组合在一个字符串中，该字符串具有显示标签所需的代码，图像位于 /image 格式为 aYY-MM-DD.png，new到这个日期选择器，还不能把它弄下来。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript">
        $(function()
            // Datepicker
            $('#datepicker').datepicker(
                dateFormat: 'yy-mm-dd',
                inline: true,
                minDate: new Date(2010, 1 - 1, 1),
                maxDate:new Date(2010, 12 - 1, 31),
                altField: '#datepicker_value',  
            );             
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function()  $(this).addClass('ui-state-hover'); , 
                function()  $(this).removeClass('ui-state-hover'); 
            );          
        );
        //var img_date = .datepicker('getDate');
            var day1 = $("#datepicker").datepicker('getDate').getDate();                 
            var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
            var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            var fullDate = year1 + "-" + month1 + "-" + day1;
    var str_output = "<h1><center><img src=\"/images/a" + fullDate + ".png\"></center></h1><br/><br>";
    page_output.innerHTML = str_output;
    // writing the results to the div element (page_out)
    </script>
</head>
<body style="background-color:#000;color:#fff;margin: auto auto;">



    <!-- Datepicker -->

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

    <!-- Highlight / Error -->
    <p>Date Value: <input type="text" id="datepicker_value" /></p>
    <div id="page_output" style="text-align:center; margin-top:80px; margin-bottom:20px; "></div>


</body>

【问题讨论】：

【参考方案1】：

我认为您希望在日期选择器的初始化中添加一个“onSelect”事件处理程序，以便在用户选择日期时触发您的代码。试试jsFiddle

$(document).ready(function()
    // Datepicker
    $('#datepicker').datepicker(
        dateFormat: 'yy-mm-dd',
        inline: true,
        minDate: new Date(2010, 1 - 1, 1),
        maxDate:new Date(2010, 12 - 1, 31),
        altField: '#datepicker_value',
        onSelect: function()
            var day1 = $("#datepicker").datepicker('getDate').getDate();                 
            var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1;             
            var year1 = $("#datepicker").datepicker('getDate').getFullYear();
            var fullDate = year1 + "-" + month1 + "-" + day1;
            var str_output = "<h1><center><img src=\"/images/a" + fullDate +".png\"></center></h1><br/><br>";
            $('#page_output').html(str_output);
        
    );
);

【讨论】：

已更新以包含正确的 jQuery 语法，如 Jeremy 和 dcloud 建议的。成功了，我可以显示所选日期，我的 img 代码不知何故搞砸了，现在很容易补救，而我只能显示一些东西。感谢大家的帮助如果这是解决您问题的答案，那么您可能应该检查一下，以便将来的读者知道。【参考方案2】：

您可以使用 datepicker 的 formatDate 函数直接指定日期格式，而不是解析日、月和年。在我的示例中，我使用“yy-mm-dd”，但您可以使用您选择的任何格式。

$("#datepicker").datepicker(
    dateFormat: 'yy-mm-dd',
    inline: true,
    minDate: new Date(2010, 1 - 1, 1),
    maxDate: new Date(2010, 12 - 1, 31),
    altField: '#datepicker_value',
    onSelect: function()
        var fullDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        var str_output = "<h1><center><img src=\"/images/a" + fullDate +".png\"></center></h1><br/><br>";
        $('#page_output').html(str_output);
    
);

【讨论】：

【参考方案3】：

这行看起来有问题：

page_output.innerHTML = str_output;

您可以在 jQuery 中使用 .innerHTML，也可以不使用它，但您必须以一种或另一种方式在语义上处理选择器：

$('#page_output').innerHTML /* for jQuery */
document.getElementByID('page_output').innerHTML /* for standard JS */

或者更好

$('#page_output').html(str_output);

【讨论】：

我改了，点击日期后还是没有图片 $('#page_output').innerHTML /* for jQuery */ 应该是 $('#page_output')[0].innerHTML /* for jQuery */ 或等价于 innerHTML 不是 jQuery 对象的属性。更改为 var str_output = "