jquery-ui 外掛程式學習–日期控制項datepicker

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Datepicker - Format date</title><link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"><script src="../../jquery-1.7.1.js"></script><script src="../../ui/jquery.ui.core.js"></script><script src="../../ui/jquery.ui.widget.js"></script><script src="../../ui/jquery.ui.datepicker.js"></script><link rel="stylesheet" href="../demos.css"><script>$(function() {$( "#datepicker" ).datepicker();$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');});</script></head><body> <div class="demo"> <p>Date: <input type="text" id="datepicker" size="30"/></p> <p>Format options:<br /><select id="format"><option value="mm/dd/yy">Default - mm/dd/yy</option><option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option><option value="d M, y">Short - d M, y</option><option value="d MM, y">Medium - d MM, y</option><option value="DD, d MM, yy">Full - DD, d MM, yy</option><option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option></select></p> </div><!-- End demo -->   <div class="demo-description"><p>jquery-ui預設的日期格式一般不是我們要的，要展現正確的格式，這個外掛程式才有實際用途。這個例子使用下拉框的值區設定日期控制項的值，我們在實際中使用可以把這個參數寫死。<br>$(function() {$( "#datepicker" ).datepicker();$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');}); </p>這樣的格式顯示為：2012-03-16</div><!-- End demo-description --> </body></html>

 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Datepicker - Icon trigger</title><link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"><script src="../../jquery-1.7.1.js"></script><script src="../../ui/jquery.ui.core.js"></script><script src="../../ui/jquery.ui.widget.js"></script><script src="../../ui/jquery.ui.datepicker.js"></script><link rel="stylesheet" href="../demos.css"><script>$(function() {$( "#datepicker" ).datepicker({showOn: "button",buttonImage: "images/calendar.gif",buttonImageOnly: true});$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');});</script></head><body> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div><!-- End demo -->   <div class="demo-description"><p>這個樣子是我們比較喜歡和常用的，點擊右邊的按鈕彈出控制項。</p>$(function() {$( "#datepicker" ).datepicker({showOn: "button",buttonImage: "images/calendar.gif",buttonImageOnly: true});$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');});</div><!-- End demo-description --> </body></html>