Script running in JSfiddle but not on browser

[John Doe]

I have a script on JSfiddle that works: It lets users select a date and from a dropdown menu and if they choose 'custom' it displays some calendar options. Otherwise it remains hidden. But on my browser when I try to run the same script and I choose 'custom' that calendar is not displayed. This is the like to the JSfiddle: http://jsfiddle.net/MgcDU/330/This is the code fragment running on the browser:\[code\]$('#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="http://stackoverflow.com/questions/13706701/beginning" selected="selected">Process all Tweets from start</option> <option value="http://stackoverflow.com/questions/13706701/RealTime tweeting">Process all Tweets in real-time</option> <option value="http://stackoverflow.com/questions/13706701/the last 24 hours">Last 24 hours</option> <option value="http://stackoverflow.com/questions/13706701/the previous week">Previous week</option> <option value="http://stackoverflow.com/questions/13706701/custom">Custom</option> </select> <input type="submit" id="open" onclick="heading()" value="http://stackoverflow.com/questions/13706701/Start Visualization" /> <input type="button" onclick="closeMap()" value="http://stackoverflow.com/questions/13706701/Stop Request"/> <div id="interval_selector"> <table class="table"> <thead> <tr> <th>Start date<a href="http://stackoverflow.com/questions/13706701/#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20"> Change</a></th> <th>End date<a href="http://stackoverflow.com/questions/13706701/#" 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="http://stackoverflow.com/questions/13706701/Further Analysis"></form></div></div> \[/code\]I've based the datepicker on based on Stafan Petre's eyecon.ro/bootstrap-datepicker example.I can't see what I'm doing wrong.Thanks