18

jquery日付ピッカーの実装から日付を取得し、それを文字列に追加して、結果の画像をdivに表示しようとしています。しかし、何かが機能していません。誰でもコードをチェックアウトして見ることができますか?

このコードは、日付ピッカーから日付を取得し、タグを表示するために必要なコードを持つ文字列に結合することになっています。画像は /image にあり、この日付に新しい aYY-MM-DD.png の形式です。ピッカーであり、まだ完全に取得できません。

<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>

4

5 に答える 5

43

ユーザーが日付を選択したときにコードがトリガーされるように、「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);
        }
    });
});
于 2010-04-01T20:07:37.687 に答える
1

この行は疑わしく見えます:

page_output.innerHTML = str_output;

jQuery 内で使用.innerHTMLすることも、jQuery なしで使用することもできますが、セマンティックにセレクターを処理する必要があります。

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

またはさらに良い

$('#page_output').html(str_output);
于 2010-04-01T19:20:45.060 に答える
0

試す

$('#page_output').html(str_output);
于 2010-04-01T19:19:22.590 に答える
0

次の行で jquery の日付をフォーマットできます。

moment($(elem).datepicker('getDate')).format("YYYY-MM-DD");

http://momentjs.com

于 2017-04-05T12:47:15.380 に答える