2. 程式人生 > >jQuery UI 實例 - 日期選擇器（Datepicker）

jQuery UI 實例 - 日期選擇器（Datepicker）

阿新 • • 發佈：2017-09-17
for cal 周四 radi panel alternate 可能 max 輸入

默認功能

日期選擇器（Datepicker）綁定到一個標準的表單 input 字段上。把焦點移到 input 上（點擊或者使用 tab 鍵），在一個小的覆蓋層上打開一個交互日歷。選擇一個日期，點擊頁面上的任意地方（輸入框即失去焦點），或者點擊 Esc 鍵來關閉。如果選擇了一個日期，則反饋顯示為 input 的值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 默認功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>
查看演示

　　

動畫

當打開或關閉 datepicker 時使用不同的動畫。從下拉框中選擇一個動畫，然後在輸入框中點擊來查看它的效果。您可以使用三個標準動畫中任意一個，或者使用 UI 特效中的任意一個。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 日期選擇器（Datepicker） - 動畫</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
    $(function() {
        $( "#datepicker" ).datepicker();
        $( "#anim" ).change(function() {
            $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
        });
    });
    </script>
</head>
<body>

<p>日期：<input type="text" id="datepicker" size="30"></p>

<p>動畫：<br>
    <select id="anim">
        <option value="show">Show (默認)</option>
        <option value="slideDown">滑下</option>
        <option value="fadeIn">淡入</option>
        <option value="blind">Blind (UI 百葉窗特效)</option>
        <option value="bounce">Bounce (UI 反彈特效)</option>
        <option value="clip">Clip (UI 剪輯特效)</option>
        <option value="drop">Drop (UI 降落特效)</option>
        <option value="fold">Fold (UI 折疊特效)</option>
        <option value="slide">Slide (UI 滑動特效)</option>
        <option value="">無</option>
    </select>
</p>


</body>
</html>

　　

其他月份的日期

datepicker 可以顯示其他月份的日期，這些日期也可以設置成可選擇的。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 其他月份的日期</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

　　

顯示按鈕欄

通過布爾值的 showButtonPanel 選項為選擇當天日期顯示一個"Today"按鈕，為關閉日歷顯示一個"Done"按鈕。默認情況下，當按鈕欄顯示時會啟用每個按鈕，但是按鈕可通過其他的選項進行關閉。按鈕文本可自定義。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 顯示按鈕欄</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

　　

內聯顯示

datepicker 是嵌套在頁面中顯示，而不是顯示在一個覆蓋層中。只需要簡單地在 div 上調用 .datepicker() 即可，而不是在 input 上調用。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 內聯顯示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
日期：<div id="datepicker"></div>
 
 
</body>
</html>

　

顯示月份 & 年份菜單

顯示月份和年份的下拉框，而不是顯示靜態的月份/年份標題，這樣便於在大範圍的時間跨度上導航。添加布爾值 changeMonth和 changeYear 選項即可。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 顯示月份 & 年份菜單</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

　　

顯示多個月份

設置 numberOfMonths 選項為一個整數 2，或者大於 2 的整數，來在一個 datepicker 中顯示多個月份。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 顯示多個月份</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 3,
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>
查看演示

　　

格式化日期

以各種方式顯示日期反饋。從下拉框中選擇一種日期格式，然後在輸入框中點擊並選擇一個日期，查看所選格式的日期顯示。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 格式化日期</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker" size="30"></p>
 
<p>格式選項：<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>
 
 
</body>
</html>

　　

圖標觸發器

點擊輸入框旁邊的圖標來顯示 datepicker。設置 datepicker 在獲得焦點時打開（默認行為），或者在點擊圖標時打開，或者在獲得焦點/點擊圖標時打開。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 圖標觸發器</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

　　

本地化日歷

本地化 datepicker 日歷語言和格式（默認為 English / Western 格式）。datepicker 包含對從右到左讀取的語言的內建支持，比如 Arabic 和 Hebrew。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 本地化日歷</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
    $( "#locale" ).change(function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"> 
  <select id="locale">
    <option value="ar">Arabic (?(???????</option>
    <option value="zh-TW">Chinese Traditional (繁體中文)</option>
    <option value="">English</option>
    <option value="fr" selected="selected">French (Fran?ais)</option>
    <option value="he">Hebrew (?(?????</option>
  </select></p>
 
 
</body>
</html>

　　

填充另一個輸入框

使用 altField 和 altFormat 選項，無論何時選擇日期，會在另一個輸入框中填充帶有一定格式的日期。這個功能通過對電腦友好性的日期進一步加工後，向用戶呈現一個用戶友好性的日期。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 填充另一個輸入框</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy"
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p>
 
 
</body>
</html>

　　

限制日期範圍

通過 minDate 和 maxDate 選項限制可選擇的日期範圍。設置起止日期為實際的日期（new Date(2009, 1 - 1, 26)），或者為與今天的一個數值偏移（-20），或者為一個周期和單位的字符串（‘+1M +10D‘）。如果設置為字符串，使用 ‘D‘ 表示天，使用 ‘W‘ 表示周，使用 ‘M‘ 表示月，使用 ‘Y‘ 表示年。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 限制日期範圍</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>
查看演示

　　

選擇一個日期範圍

選擇要搜索的日期範圍。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 選擇一個日期範圍</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>
 
<label for="from">從</label>
<input type="text" id="from" name="from">
<label for="to">到</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>

　　

顯示一年中的第幾周

datepicker 可以顯示一年中的第幾周。默認的計算是按照 ISO 8601 定義：每周從星期一開始，每年的第一周包含該年的第一個星期四。這就意味著一年中的一些天可能是屬於另一年中的周。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期選擇器（Datepicker） - 顯示一年中的第幾周</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showWeek: true,
      firstDay: 1
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>
查看演示

　　jQuery的datepicker變成中文:jquery.ui.datepicker-zh-CN.js一般會找這個js,我把這個js的代碼拿出來，以後就不需要再在網上找啦:

jQuery(function($){  
    $.datepicker.regional[‘zh-CN‘] = {  
        closeText: ‘關閉‘,  
        prevText: ‘<上月‘,  
        nextText: ‘下月>‘,  
        currentText: ‘今天‘,  
        monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,  
        ‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],  
        monthNamesShort: [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,  
        ‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘],  
        dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],  
        dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],  
        dayNamesMin: [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],  
        weekHeader: ‘周‘,  
        dateFormat: ‘yy-mm-dd‘,  
        firstDay: 1,  
        isRTL: false,  
        showMonthAfterYear: true,  
        yearSuffix: ‘年‘};  
    $.datepicker.setDefaults($.datepicker.regional[‘zh-CN‘]);  
});

　　以上除了百度菜鳥教程的，還有自己百度的。多敲，多總結整理。

jQuery UI 實例 - 日期選擇器（Datepicker）

相關推薦

jQuery UI 實例 - 日期選擇器（Datepicker）

for cal 周四 radi panel alternate 可能 max 輸入 默認功能 日期選擇器（Datepicker）綁定到一個標準的表單 input 字段上。把焦點移到 input 上（點擊或者使用 tab 鍵），在一個小的覆蓋層上打開一個交互日歷。選擇一個日期

jQuery UI 日期選擇器（Datepicker）

jquery ui next ext style cti cto log href region 設置JqueryUI DatePicker默認語言為中文 <!doctype html><html lang="en"> <head&g

自制日期選擇器（datepicker）

在網上看過很多關於datepicker的列子，效果就是我想要的，但介面卻和我的專案不同，因此在網上的例子上做做手腳，改變下外觀，先說下改動的地方，再將程式碼放上去。 1、主要改動關鍵是在WheelView類：protected void onDraw(Canvas canv

jQuery中的基本過濾選擇器（四、三）：:first、:last、:not() ... ...

<!DOCTYPE html> <html> <head> <title>基本過濾選擇器</title> <meta http-equiv="content-type" content="text/html;

java 日期選擇器（帶時間）

import java.awt.BorderLayout; import java.awt.Color; import java.awt.Cursor; import java.awt.Dimension; import java.awt.FlowLayo

jQuery選擇器（二）——層次選擇器

昨天對jQuery選擇器的分了大致有了一個瞭解，主要分為：基本選擇器/ 層次選擇器 / 過濾選擇器 / 表單選擇器 基本選擇器是由 id選擇器 / class選擇器 / elements選擇器 / 萬

jQuery學習 — — 選擇器（中）

四、內容過濾選擇器 :contains選擇器: $(“div:contains(‘la’)”) （注意該選擇器針對的是文字，不是元素） 將包含有la字串的div元素作為Dom物件放進jQuery包

第三方開源庫：日期時間選擇器（TimePickerDialog）+ 省市區三級聯動(CityPicker) + 一級滾動

TimePickerDialog Android時間選擇器，支援年月日時分，年月日，年月，月日時分，時分格式，可以設定最小時間和最大時間（精確到分）。 效果圖 gradle compile 'com.jzxiang.pickervie

jQuery學習 — — 選擇器（上）

一、基本選擇器 id選擇器：$(“#test”); 注意需要以#開頭，才是根據id查詢; 將id=test的Don物件儲存到jQuery包裝集並返回。（返回的是一個jQuery物件）; 標籤選擇

jquery 常用選擇器 （筆記）

$("#myELement") 選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一的元素 $("div") 選擇所有的div標籤元素，返回div元素陣列 $(".myClass")

CSS3學習系列之選擇器（二）

計算 選擇器 sky :focus ddr gree for 指定元素 學習 first-child選擇器和last-child選擇器 first-child指定第一個元素。last-child指定最後一個子元素。 例如： <!DOCTYPE html>

css3新特性選擇器（補充）

last inpu child 一行 標簽 after 第一個 ren 得到 1.選擇p標簽中的第一個字符 p:first-letter{ color:red; font-size:25px; } 2.選擇p標簽中的第一行 p:first-line{ 　　color:red

css選擇器（基礎）

掌握 class 就是 content tle 版本 語法 tex 人物 CSS選擇器： 一個樣式的語法是由選擇器+屬性+屬性值三部分組成； 到底什麽是選擇器呢？ 答：個人直白的理解為：選擇一種要對它進行操作的標簽的方法就叫做選擇器。也就是說選擇器就

CSS(CSS3)選擇器（1）

cti str 插入 link 規則 padding 不可 情況 可能 這篇文章主要用於存儲CSS以及CSS3的選擇器部分知識，以便日後查閱及記憶. 該內容分為兩部分，第一部分為css選擇器的一些基本知識。第二部分為CSS3新增加的選擇器。 在開始之前，先簡單介紹一下選擇器

CSS(CSS3)選擇器（2）

for 字符 tutorials pty disable post input purple enabled 該部分主要為CSS3新增的選擇器 接上一篇 CSS（CSS3）選擇器（1） 一.通用兄弟選擇器: 24：E ~

Linux 文件管理命令語法、參數、實例全匯總（一）

rwx 界面 endif 群組 new 才有 func {} ans 命令：cat cat 命令用於連接文件並打印到標準輸出設備上。 使用權限 所有使用者 語法格式 cat [-AbeEnstTuv] [--help] [--version] fileName 參數

CSS選擇器之兄弟選擇器（~和+）

spa 例子 inf 代碼 但是 info 發現 效果 說話 　　今天在改以以前人家寫的網頁的樣式的時候，碰到這個選擇器，‘~’，當時我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是

BP算法實例—鳶尾花的分類（Python）

weight 1.0 pandas update dom 零矩陣 shuffle == 不同 首先了解下Iris鳶尾花數據集： Iris數據集（https://en.wikipedia.org/wiki/Iris_flower_data_set）是常用的分類實

CSS樣式選擇器（1）

class 是按照 同類型 來歸類HTML的各種元素的，要把某些元素歸為一類，一般會考慮到下面這些因素： 它們具有同樣的樣式，比如不管他們的標籤是什麼，h1 或者是 div，但是字型大小都是 16px； 它們是一種具有同樣意義的東西，比如我們做網站，一般首頁的 LOGO

css選擇器（一）基本選擇器

基本選擇器 1、通用元素選擇器 *表示應用到所有的標籤。 　　*{ 　　　padding:0px; 　　　margin:0px; 　　} 2、元素/標籤選擇器 匹配所有p標籤的元素 　　p{ 　　　color:red; 　　　background:yellow; 　　} 3、類選擇器