0

JSfiddleに機能するスクリプトがあります。これにより、ユーザーはドロップダウンメニューから日付を選択でき、[カスタム]を選択すると、いくつかのカレンダーオプションが表示されます。それ以外の場合は非表示のままです。しかし、ブラウザで同じスクリプトを実行しようとして「カスタム」を選択すると、カレンダーが表示されません。これはJSfiddleに似ています：http：//jsfiddle.net/MgcDU/330/

これは、ブラウザで実行されているコードフラグメントです。

$('#time').on('change', function(){
    if($(this).val() == 'custom'){
        $('#interval_selector').show();
        }
    else{
        $('#interval_selector').hide();
         }
 });

    $(function(){
        window.prettyPrint && prettyPrint();

        var startDate = new Date(2012,1,20);
        var endDate = new Date(2012,1,25);
        $('#dp4').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
                } else {
                    $('#alert').hide();
                    startDate = new Date(ev.date);
                    $('#startDate').text($('#dp4').data('date'));
                }
                $('#dp4').datepicker('hide');
            });
        $('#dp5').datepicker()
            .on('changeDate', function(ev){
                if (ev.date.valueOf() < startDate.valueOf()){
                    $('#alert').show().find('strong').text('The end date can not be less then the start date');
                } else {
                    $('#alert').hide();
                    endDate = new Date(ev.date);
                    $('#endDate').text($('#dp5').data('date'));
                }
                $('#dp5').datepicker('hide');
            });
    });

</script>

<div class="page-header">
   <h2 id="changer">Enter the Event you would like to follow:</h2>
 </div>


<style>
 #interval_selector{
  display:none;
  background:none;
   margin:10px;
 }
</style>

<div class="row">
<div class="span11">  
<form id ="eventForm">
     <select name="period" id="time">
        <option value="beginning" selected="selected">Process all Tweets from start</option>
        <option value="RealTime tweeting">Process all Tweets in real-time</option>
        <option value="the last 24 hours">Last 24 hours</option>
        <option value="the previous week">Previous week</option>
        <option value="custom">Custom</option> 
     </select>

    <input type="submit" id="open" onclick="heading()" value="Start Visualization" />

    <input type="button" onclick="closeMap()" value="Stop Request"/>

    <div id="interval_selector">
        <table class="table">
            <thead>
                <tr>
                    <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th>
                    <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25"> Change</a></th>
                </tr>
               </thead>
               <tbody>
                <tr>
                    <td id="startDate "> 2012-02-20</td>
                    <td id="endDate "> 2012-02-25</td>
                </tr>
                </tbody>
            </table>
        </div>
    </form> 
</div>  


<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>

私は、StafanPetreのeyecon.ro/bootstrap-datepickerの例に基づいてdatepickerを作成しました。

何が間違っているのかわかりません。

ありがとう

4

1 に答える 1

3

jsfiddleは、デフォルトでウィンドウロードで実行されます。$(document).ready(function(){...})同様の効果を得るには、コードをラップします。（私はあなたのスニペットのコードの最初のブロックを見ています）

$(function(){ // <--- THIS LINE WAS MOVED
    $('#time').on('change', function(){
        if($(this).val() == 'custom'){
            $('#interval_selector').show();
            }
        else{
            $('#interval_selector').hide();
             }
     });
     window.prettyPrint && prettyPrint();
于 2012-12-04T15:52:58.130 に答える