DetailsView 用jquery 日期

ASP.NET C# DetailsView中使用jquery日期UI

請到https://jqueryui.com/datepicker/#default

1、選擇Default functionality

2、在Date欄位點選會出日期選單

3、點選後可以看原始碼

image

4、原始碼如下

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>

      $( function() 

        {

            $( "#datepicker" ).datepicker();

        } );

  </script>

</head>

<body>

 

<p>Date: <input type="text" id="datepicker"></p> 

 

</body>

</html>

5、為讓server能快速執行,我把 *.ccs、*.js 下載後放到Scripts目錄。

image

6、從Visual Studiod Script目錄(如上圖),拖拿進來,會幫你把程式碼寫好

image

7、上面做好後把DetailsView的日期轉成樣版

image

8、將日期轉成樣版

image

9、再來編輯樣版

image

10、將TextBox的id改成datepicker後,結束樣版編輯

image

11、到網頁上 把 $("#datepicker").datepicker()(如圖1); 改成 $("#DetailsView1_datepicker").datepicker()(如圖2);

圖1

image

圖2

image

12、執行程式,有出現就成功了

image

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

分類
BlogUpp!