Latest web development tutorials

مسج واجهة المستخدم سبيل المثال - تاريخ منقار (منتقي التاريخ)

من مربع منبثق أو تقويم مضمنة لتحديد موعد لذلك.

لمزيد من التفاصيل حول مكونات منتقي التاريخ، راجع وثائق API عضو تاريخ منقار (ومنتقي التاريخ والقطعة) .

وظيفة الافتراضي

لا بد تاريخ منقار (منتقي التاريخ) إلى النموذج القياسي في حقل الإدخال. نقل التركيز على المدخلات (أو استخدام مفتاح التبويب فوق) لفتح تقويم تفاعلي على تراكب صغيرة. اختر تاريخا، انقر فوق أي مكان على الصفحة (يفقد مربع الإدخال التركيز)، أو انقر على مفتاح Esc لإغلاقه. إذا قمت بتحديد موعد، يتم عرض ردود الفعل حيث بلغت قيمة المدخلات. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - وظيفة الافتراضي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

حيوية

استخدام الرسوم المتحركة المختلفة عند فتح أو إغلاق منتقي التاريخ. اختر الفيلم من مربع القائمة المنسدلة، ثم انقر فوق المربع لمعرفة تأثيره. يمكنك استخدام أي واحد من ثلاثة الرسوم المتحركة القياسية، والمؤثرات الخاصة، أو استخدام أي من واجهة المستخدم. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
	<محارف ميتا = "UTF-8">
	<عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - منتديات </ عنوان>
	<وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
	<سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
	<وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
	<script>
	$ (وظيفة () {
		$ ( "#datepicker") .datepicker ()؛
		$ ( "#anim") .change (وظيفة () {
			$ ( "#datepicker") .datepicker ( "الخيار"، "showAnim"، $ (هذا) .val ())؛
		})؛
	})؛
	</ script>
</ رئيس>
<body>

<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ" حجم = "30"> </ P>

<P> رسوم متحركة: <BR>
	<تحديد هوية = "حيوان">
		<الخيار قيمة = "عرض"> مشاهدة (الافتراضي) </ خيار>
		<قيمة الخيار = "slideDown"> الشرائح </ خيار>
		<قيمة الخيار = "fadeIn"> تتلاشى </ خيار>
		<الخيار قيمة = "العمياء"> مكفوفين (الستائر UI الآثار) </ خيار>
		<الخيار قيمة = "ترتد"> ترتد (الآثار UI انتعاش) </ خيار>
		<الخيار قيمة = "كليب"> كليب (آثار تحرير UI) </ خيار>
		<قيمة الخيار = "إسقاط"> قطرة (UI هبطت الآثار) </ خيار>
		<الخيار قيمة = "اضعاف"> أضعاف (الآثار UI مطوية) </ خيار>
		<الخيار قيمة = "الانزلاق"> الشريحة (UI آثار انزلاق) </ ​​خيار>
		<قيمة الخيار = ""> لا </ خيار>
	</ تحديد>
</ P>


</ الجسم>
</ HTML>

أشهر أخرى من تاريخ

منتقي التاريخ يمكن أن تظهر تاريخ شهر إضافي، قد يتم تعيين هذه التواريخ إلى اختياري. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - في غيره من الشهور من تاريخ </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      showOtherMonths: صحيح،
      selectOtherMonths: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

زر شريط العرض

بواسطة منطقية showButtonPanel لاختيار اليوم عرض التاريخ على "اليوم" زر لإيقاف تقويم يعرض "تم" خيار زر. افتراضيا، عندما زر شريط العرض سيمكن كل زر، ولكن على زر يمكن إيقاف من خلال الخيارات الأخرى. نص الزر يمكن تخصيص. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - عرض شريط زر </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      showButtonPanel: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

عرض مضمنة

تداخل منتقي التاريخ في عرض الصفحة، وليس في طبقة الغلاف. ببساطة استدعاء .datepicker شعبة () يمكن أن يكون، بدلا من الدعوة على المدخلات. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم تاريخ منقار (منتقي التاريخ) - عرض مضمنة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ()؛
  })؛
  </ script>
</ رئيس>
<body>
 
التاريخ: <div معرف = "منتقي التاريخ"> </ div>
 
 
</ الجسم>
</ HTML>

عرض القائمة الشهر والسنة

يعرض المربع المنسدل الشهر والسنة، بدلا من عرض ثابت من عنوان الشهر / السنة، فمن السهل أن تمتد مجموعة كبيرة من الوقت على الملاحة. إضافة قيمة منطقية changeMonth و changeYear الخيار. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - عرض الشهر اند القائمة السنة </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      changeMonth: صحيح،
      changeYear: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

عرض عدة أشهر

وضع numberOfMonths الخيار هو عدد صحيح 2 أو عدد صحيح أكبر من 2، ليتم عرضها على منتقي التاريخ عدة أشهر. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - عرض عدة أشهر </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      NUMBEROFMONTHS: 3،
      showButtonPanel: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

تنسيق التاريخ

في مجموعة متنوعة من الطرق لعرض ردود الفعل التاريخ. حدد تنسيق التاريخ من مربع القائمة المنسدلة، ثم انقر فوق وحدد تاريخ في مربع الإدخال، عرض تنسيق التاريخ من العرض المحدد. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - تنسيق التاريخ </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ()؛
    $ ( "#format") .change (وظيفة () {
      $ ( "#datepicker") .datepicker ( "الخيار"، "dateFormat"، $ (هذا) .val ())؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ" حجم = "30"> </ P>
 
<P> خيارات تنسيق: <BR>
  <تحديد هوية = "الشكل">
    <الخيار قيمة = "شهر / يوم / سنة"> افتراضي - شهر / يوم / سنة </ خيار>
    <الخيار قيمة = "YY-MM-DD"> ISO 8601 - YY-MM-DD </ خيار>
    <الخيار قيمة = "د M، Y"> القصير - د M، Y </ خيار>
    <قيمة الخيار = "د MM، ذ"> متوسط ​​- د MM، ص </ خيار>
    <الخيار قيمة = "DD، د MM، المغادرة"> الكامل - DD، د MM، المغادرة </ خيار>
    <الخيار قيمة = "& أبوس]؛ يوم وأبوس]؛ د & أبوس]؛ من & أبوس]؛ MM أحرزنا في السنة أحرزنا yyyy إنهاء"> مع النص - 'اليوم' د 'من' MM 'في العام yyyy إنهاء </ خيار>
  </ تحديد>
</ P>
 
 
</ الجسم>
</ HTML>

رمز الزناد

انقر على أيقونة بجانب مربع الإدخال لعرض منتقي التاريخ. الإعداد منتقي التاريخ يفتح (السلوك الافتراضي) في التركيز، أو انقر على أيقونة لفتح، أو فتح / تلقي التركيز عند النقر على الرمز. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - رمز الزناد </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      showOn: "زر"
      buttonImage: "الصور / calendar.gif"
      buttonImageOnly: صحيح
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

تقويم المترجمة

لغة الترجمة منتقي التاريخ الزمني والشكل (الافتراضي هو اللغة الإنجليزية / الشكل الغربي). منتقي التاريخ يحتوي على المدمج في دعم لغات القراءة من اليمين إلى اليسار، مثل العربية والعبرية. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - تقويم محلية </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <سيناريو SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
  <سيناريو SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
  <سيناريو SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
  <سيناريو SRC = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ($ .datepicker.regional [ "الأب"])؛
    $ ( "#locale") .change (وظيفة () {
      $ ( "#datepicker") .datepicker ( "الخيار"،
        $ .datepicker.regional [$ (هذا) .val ()])؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> & نبسب؛
  <تحديد هوية = "لغة">
    <الخيار قيمة = "AR"> العربية (& # 8235؛ (& # 1575؛ & # 1604؛ & # 1593؛ & # 1585؛ & # 1576؛ & # 1610؛ & # 1577؛ </ خيار>
    <الخيار قيمة = "زكية-TW"> الصينية التقليدية (& # 32321؛ & # 39636؛ & # 20013؛ & # 25991؛) </ خيار>
    <قيمة الخيار = ""> الإنجليزية </ خيار>
    <الخيار قيمة = "الاب" اختيار = "مختارة"> الفرنسية (فران وccedil؛ AIS) </ خيار>
    <قيمة الخيار = "هو"> العبرية (& # 8235؛ (& # 1506؛ & # 1489؛ & # 1512؛ & # 1497؛ & # 1514؛ </ خيار>
  </ تحديد> </ P>
 
 
</ الجسم>
</ HTML>

ملء مربع آخر مساهمة

استخدام altField و altFormat ، سوف تملأ الخيارات كلما حدد موعد التاريخ مع صيغة معينة في مربع إدخال آخر. عندما تكون هذه الوظيفة من تاريخ مزيد من المعالجة الملائمة للكمبيوتر، يتم تقديم المستخدم مع تاريخ سهل الاستعمال. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - ملء مربع إدخال آخر </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      altField: "#alternate"
      altFormat: "DD، د MM، المغادرة"
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> & نبسب؛ <إدخال نوع = "نص" معرف = "البديل" حجم = "30"> </ P>
 
 
</ الجسم>
</ HTML>

الحد من نطاق التاريخ

بواسطة minDate و maxDate الخيار يحد من نطاق التاريخ للاختيار. تعيين تواريخ البدء والانتهاء من التاريخ الفعلي (التسجيل الجديد (2009، 1-1، 26))، أو سلسلة من قيمة تعويض اليوم (-20)، أو كدورة وحدات ( '+ 1M + 10D '). إذا تم تعيين إلى سلسلة، استخدام 'D' لعدة أيام، وذلك باستخدام 'W' يمثل أسابيع، وذلك باستخدام 'M' لشهر، وذلك باستخدام 'Y' هي السنة. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - الحد من نطاق التاريخ </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({MinDate: -20، maxDate: "+ 1M + 10D"})؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>

تحديد نطاق تاريخ

تحديد نطاق تاريخ للبحث. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - حدد نطاق تاريخ </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#from") .datepicker ({
      defaultDate: "+ 1W"
      changeMonth: صحيح،
      NUMBEROFMONTHS: 3،
      عند_الإغلاق: وظيفة (selectedDate) {
        $ ( "#to") .datepicker ( "الخيار"، "minDate"، selectedDate)؛
      }
    })؛
    $ ( "#to") .datepicker ({
      defaultDate: "+ 1W"
      changeMonth: صحيح،
      NUMBEROFMONTHS: 3،
      عند_الإغلاق: وظيفة (selectedDate) {
        $ ( "#from") .datepicker ( "الخيار"، "maxDate"، selectedDate)؛
      }
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<تسمية ل= "من"> من </ التسمية>
<إدخال نوع = "نص" معرف = "من" اسم = "من">
<تسمية ل= "إلى"> إلى </ التسمية>
<إدخال نوع = "نص" معرف = "إلى" اسم = "إلى">
 
 
</ الجسم>
</ HTML>

أسبوع المعرض العام

منتقي التاريخ يمكن عرضها على الأسابيع القليلة الأولى من العام. يتم احتساب الافتراضي وفقا للايزو 8601 التعريف: الأسبوع ابتداء من يوم الاثنين، في الأسبوع الأول من العام الذي يحتوي على أول يوم خميس من. وهذا يعني أنه في سنة واحدة، وربما يكون آخر يومين في الأسبوع. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج تاريخ UI منقار (منتقي التاريخ) - عرض الأسابيع القليلة الأولى من العام </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <script>
  $ (وظيفة () {
    $ ( "#datepicker") .datepicker ({
      showWeek: صحيح،
      firstDay: 1
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<P> التاريخ: <إدخال نوع = "نص" معرف = "منتقي التاريخ"> </ P>
 
 
</ الجسم>
</ HTML>