استخدم JQuery UI Datepicker مع أيقونات من Jquery UI Theme

Question

لدي إعداد للتحكم في منتقي البيانات باستخدام JQuery UI، وأنا أستخدم أيضًا سمات JQuery UI التي توفر مجموعة من الرموز الافتراضية التي أرغب في استخدامها.

يسمح DatePicker بتحديد صورة معينة، على سبيل المثال:

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>  

لعرض رمز من مجموعة الأيقونات، يمكنك استخدام شيء مثل:

<span class="ui-icon ui-icon-calendar"></span>

هل هناك طريقة سهلة لدمج الاثنين أم أنني بحاجة فقط إلى اختراق الأنماط/الصور يدويًا؟

Answer 1

وأخشى عليك أن تفعل ذلك يدويا. افتراضيا، يستخدم البرنامج المساعد منتقي التاريخ وHTML التالية لإدراج buttonImage محدد:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

وبالمناسبة، قد ترغب في استخدام ...

$(function() {
 // your code here
});

... بدلا من ...

$(document).ready(function() {
 // your code here
});

Answer 2

وحصلت عليه العمل من خلال ذلك

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

وفقط يعدل الزر الذي يقوم بإدراج بجانب الإدخال للتقويم. افتراضيا يقذفون ثلاثة الحذف في النص، لذلك يمكنني إزالة ذلك أيضا.

Answer 3

أقترح وضع الصورة في الإدخال

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

يحب

إستعملت هذا الرمز من الجميل أيقونات التانغو المشروع متاح أيضا في بي إن جي

مزايا:

• مستقلة عن جافا سكريبت
• يتم التحميل على الفور باستخدام DOM
• من السهل إضافة مدخلات التاريخ المستقبلي

Answer 4

وأفضل طريقة ستكون ل؛

وأول استخدام جافا سكريبت كما كنت قد استخدمت بالفعل.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

وبعد ذلك، قم بإضافة التعليمة البرمجية التالية المغلق؛

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

وهذه المغلق سوف تساعدك على محاذاة الصورة تقويم بشكل صحيح كما طلبتم.

Answer 5

ومجرد قاصر تابع إلى الإجابة المركبات الكهربائية "... (مساعدة كبيرة وشكرا المركبات الكهربائية!).

وكان يعمل في IE8 جدا، وأضفت CSS لتغيير المؤشر على التحويم:

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

Answer 6

http://jqueryui.com/demos/datepicker/#icon-trigger

وويرد مثال جيد جدا مع نموذج التعليمات البرمجية.

Answer 7

والاقتراض من ومد الجواب Loktar، هل يمكن أن تجرب شيئا من هذا القبيل، لاحظ لقد اختبرت هذا فقط في FF10، ولكن لا أستطيع أن أرى لماذا لن ينجح في المتصفحات الأخرى.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

لاحظ أنه في هذا المثال، <م> مخبأة التاريخ منقار على زر و <م> التاريخ منقار-رمز هي فئات بلدي، لأنني لا أحب التصميم ومسج دروس CSS مباشرة. تطبيق CSS التالية:

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

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

Answer 8

ولقد استخدمت هذا الرمز مسج للحصول على منتقي التاريخ لحقل textinput ورمز مسج UI للعمل في الصورة على زر منتقي التاريخ.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

Answer 9

والتغيير: لshowOn: "كلا"، // زر

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

Answer 10

في الذهاب مسار الإعداد يدويا زر / رمز، هل يمكن استخدام هذا المثال من <لأ href = "https://stackoverflow.com/questions/19444512/how-to-combine-the-jqueryui-datepickers -icon الزناد، مع التمهيد-3S-المدخلات وز # الجواب-19448982 "> كيفية الجمع بين jQueryUI منتقي التاريخ وأيقونة الزناد مع التمهيد 3 في المجموعات الإدخال أن يكون تعيين حدث JS انقر التركيز على التاريخ ذات الصلة حقل الإدخال، وبالتالي التسبب في وظائف تاريخ jQueryUI على ما يبدو.

وأو، كما في الوثائق الدول، يمكنك استخدام الأسلوب show ل عرض منتقي التاريخ (لاحظ أن "إذا تم إرفاق منتقي التاريخ إلى المدخلات، والمدخلات يجب أن تكون مرئية للمنتقي التاريخ أن تظهر.").

و$( ".selector" ).datepicker( "show" );

وهذا يسمح لك لاستخدام كل ما زر / صورة / الرمز بجانب حقل الإدخال، وتكون قادرة على الضغط على الزر / صورة / رمز لتحريك وظائف موعد لحقل الإدخال.

Answer 11

وحصلت على هذا العمل عن طريق إضافة HTML لزر رمز لي مباشرة إلى الخيار buttonText وتعطيل الخيار buttonImage.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});