2012年8月8日 星期三

[jQuery] Datapicker 日期選擇(單日 / 日期區間)

但是今天要用官方 jQuery 的 Datapicker 來實作
官方DEMO: http://jqueryui.com/demos/datepicker/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Datepicker 日期選擇器</title>
    <link rel="stylesheet" href="lib/ui.datepicker.css" type="text/css" media="screen"
        title="core css file" charset="utf-8" />

    <script type="text/javascript" src="lib/jquery.js"></script>

    <script type="text/javascript" src="lib/ui.datepicker.js"></script>

    <script language="javascript" type="text/javascript">
    jQuery(function($){
          $('#TB_Date1').datepicker({dateFormat: 'yy-mm-dd', showOn: 'both',
              buttonImageOnly: true, buttonImage: 'lib/images/calendar.gif'});
             
        $('#TB_Date2').datepicker({dateFormat: 'yy/mm/dd', rangeSelect: true, firstDay: 1, showOn: 'both',
              buttonImageOnly: true, buttonImage: 'lib/images/calendar.gif'});                         
    });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--選擇日期--%>
        <input id="TB_Date1" type="text" runat="server" value="click here to see" />
        <br />
        <br />
        <br />
        <%--選擇日期區間--%>
        <input id="TB_Date2" type="text" runat="server" value="click here to see" />
        <br />
    </div>
    </form>
</body>







下載完整Demo範例


原始文章出自於此




沒有留言:

張貼留言