زر اليوم في jQuery Datepicker لا يعمل

Question

أنا أستخدم jQueryUI Datepicker وأظهر زر "اليوم".لكنها لا تعمل.كما أنه لا يعمل في العرض التوضيحي: http://www.jqueryui.com/demos/datepicker/#buttonbar

أريد ملء الإدخال باليوم عند الضغط على هذا الزر.

هل من الممكن تفعيلها؟

Answer 1

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

لجعلها أكثر سهولة، ستحتاج إلى تحديث رمز البرنامج المساعد لتناسب احتياجاتك. اسمحوا لي أن أعرف كيف ستسير الامور.

وستحتاج إلى الحصول على نسخة مضغوط من جافا سكريبت مسج واجهة المستخدم. أنا أبحث في النسخة 1.7.2 وظيفة "_gotoToday" على خط 6760. فقط إضافة مكالمة إلى أن _gotoToday الذي وقع قبالة ظيفة _selectDate () على خط 6831. :) سعيد الترميز.

Answer 2

وأنا لا أحب الحل تعديل شفرة المصدر مسج لأنه يزيل القدرة على استخدام CDN. وبدلا من ذلك، يمكنك إعادة تعيين وظيفة _gotoToday من خلال إدراج هذا الرمز على أساسmeesterjeeves href="https://stackoverflow.com/a/3337343/3993154"> في مكان ما في ملف نطاق جافا سكريبت صفحتك:

$.datepicker._gotoToday = function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
            inst.selectedDay = inst.currentDay;
            inst.drawMonth = inst.selectedMonth = inst.currentMonth;
            inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
            var date = new Date();
            inst.selectedDay = date.getDate();
            inst.drawMonth = inst.selectedMonth = date.getMonth();
            inst.drawYear = inst.selectedYear = date.getFullYear();
            // the below two lines are new
            this._setDateDatepicker(target, date);
            this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
}

ورمز أعلاه هو في الأساس نفس مسج UI منتقي التاريخ من الإصدار 1.10.1 باستثناء اثنين من خطوط ملحوظ أعلاه. كامل غمغم الجامبو مع gotoCurrent في الواقع يمكن إزالتها منذ ذلك الخيار لا معنى له مع شركائنا معنى جديدا من "اليوم".

Answer 3

وأعتقد أن أفضل طريقة للتعامل مع ذلك هي تجاوز أسلوب _goToToday خارج المكتبة نفسها. حل هذه المسألة بالنسبة لي:

var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
  old_goToToday.call(this,id)
  this._selectDate(id)
}

وبسيطة ولا تتطلب منك الإختراق عن أي أحداث أو تغيير أي وظيفة الأساسية

Answer 4

ما عليك سوى إضافة السطرين التاليين من التعليمات البرمجية إلى الدالة _gotoToday...

/* Action for current link. */
_gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
        inst.selectedDay = inst.currentDay;
    inst.drawMonth = inst.selectedMonth = inst.currentMonth;
    inst.drawYear = inst.selectedYear = inst.currentYear;
    }
    else {
        var date = new Date();
        inst.selectedDay = date.getDate();
        inst.drawMonth = inst.selectedMonth = date.getMonth();
        inst.drawYear = inst.selectedYear = date.getFullYear();
    }
    this._notifyChange(inst);
    this._adjustDate(target);

    /* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
    this._setDateDatepicker(target, new Date());
    this._selectDate(id, this._getDateDatepicker(target));
},

Answer 5

وعلى الرغم من أنني أعرف وقد تم بالفعل قبل هذا، وهنا هو بلدي حل يقوم على توسيع <لأ href = "https://stackoverflow.com/questions/1073410/today-button-in-jquery-datepicker-doesnt-work/ 7358962 # 7358962 "عنوان =" فكرة سامي زين ل"> سامي زين لفكرة . كان ذلك باستخدام مسج 1.6.3 ومسج UI 1.8.16، وعملت بالنسبة لي في فايرفوكس 6.

$('.ui-datepicker-current').live('click', function() {
    // extract the unique ID assigned to the text input the datepicker is for
    // from the onclick attribute of the button
    var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
    // set the date for that input to today's date
    var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
    // (optional) close the datepicker once done
    $associatedInput.datepicker("hide");
});

وقد ترغب في blur() أيضا $associatedInput والتركيز على المدخلات المقبل / حدد في الصفحة الخاصة بك، ولكن هذا ليس تافها للقيام بشكل عام، أو هو تنفيذ محددة.

وكمثال على ذلك، فعلت ذلك على صفحة كنت أعمل على أن الجداول المستخدمة للتخطيط (لا تفهموني بدأت، وأنا أعلم أن ممارسة سيئة!):

$associatedInput.closest('tr').next('tr').find('input,select').first().focus();

Answer 6

وأنا لا أحب فكرة إضافة رمز إضافية إلى رمز مصدر مسج. وأنا لا أريد لتجاوز طريقة _gotoToday من تنفيذه في مكان ما في كود جافا سكريبت وإضافة خطوط إضافية في أسفل لصق نسخة.

وهكذا، لقد أنب ذلك باستخدام هذا الرمز:

(function(){
    var original_gotoToday = $.datepicker._gotoToday;

    $.datepicker._gotoToday = function(id) {
        var target = $(id),
            inst = this._getInst(target[0]);

        original_gotoToday.call(this, id);
        this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
    }
})();

Answer 7

يجب عليك استخدام todayBtn خيار:

$("...").datepicker({
  todayBtn: "linked"
})

(بدلاً من todayBtn: true).

اليومBtn

منطقية، "مرتبطة".تقصير:خطأ شنيع

إذا كان صحيحًا أو "مرتبطًا" ، يعرض زر "اليوم" في أسفل DatePicker لتحديد التاريخ الحالي.إذا كان ذلك صحيحًا ، فإن زر "اليوم" لن ينقل التاريخ الحالي إلى العرض فقط ؛إذا كان "مرتبطًا" ، فسيتم تحديد التاريخ الحالي أيضًا.

لمزيد من التفاصيل انظر الرابط التالي:http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Answer 8

وثائق تقول ما "اليوم" التي يمكن تغيير عنوان عبر

.datepicker('option', 'currentText', 'New Title') 

والتغييرات فقط عرض الشهر لتيار. ويمكن أيضا أن يتم تكوين هذا السلوك

.datepicker('option', 'gotoCurrent', true);

وبعد ذلك الضغط على زر سيغير الشهر عرض واحد اختيار تاريخ ل.

ويبدو تقديم موعد مع هذا الزر من المستحيل حسب التصميم.

Answer 9

ولقد أضافت خيارا للمنتقي التاريخ لهذا الغرض: selectCurrent

لتفعل الشيء نفسه، لديك فقط لإضافة ما يلي إلى ملف مضغوط شبيبة:

1) نحو نهاية وظيفة منتقي التاريخ ()، إضافة:

selectCurrent: false // True to select the date automatically when the current button is clicked

2) في نهاية الدالة _gotoToday، إضافة:

if (this._get(inst, 'selectCurrent'))
  this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));

Answer 10

وأنا فقط حصلت على التخلص منه.

في بعض الملفات CSS هذا جزء من الصفحة الخاصة بك:

.ui-datepicker-current {
    visibility:hidden
}

Answer 11

ويمكنك محاولة رمز أدناه بالإضافة إلى ملء التاريخ الحالي في مربع الإدخال على النقر على زر اليوم. فقط ضع التعليمات البرمجية أدناه في وظيفة _gotoToday (في نهاية الدالة) في jquery.ui.datepicker.js.

this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));

تجدر الإشارة إلى أن أستخدمه النسخة 1.8.5 من منتقي التاريخ مسج.

Answer 12

مسج UI منتقي التاريخ واليوم وصلة

و$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

Answer 13

$.datepicker._gotoToday = function(id) {
  var inst = this._getInst($(id)[0]);

  var date = new Date();
  this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}

$.datepicker.setDefaults({
  changeMonth: true,
  maxDate: 'today',
  numberOfMonths: 1,
  showButtonPanel: true
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<input type="text" id="id">

Answer 14

تتم إعادة هيكلة منتقي التاريخ ليكون أكثر روعة بعشر مرات على الأقل.الإصدار الجديد سوف يعالج هذه المشكلة.

http://wiki.jqueryui.com/w/page/12137778/Datepicker

Answer 15

ويمكنك أيضا محاولة لإضافة هذا السيناريو الخاص بك:

$('.ui-datepicker-current').live('click', function() {
       $(".datepicker").datepicker("setDate", date);
});

(استخدم وظيفة .live ولا. انقر)

Answer 16

وهذا هو الإختراق التي عملت بالنسبة لي يستخدم دالة رد beforeShow ومنتقي التاريخ وخلافا لنهج الحية ().

     ,beforeShow: function(input, datepicker) {
         setTimeout(function() {
             datepicker.dpDiv.find('.ui-datepicker-current')
                .text('Select Today')
                .click(function() {
                     $(input)
                         .datepicker('setDate', new Date())
                         .datepicker('hide');
                });
         }, 1);
         return {};
     }

Answer 17

وهذا هو الإختراق بسيط

$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}

$( “#datepicker” ).datepicker({
showButtonPanel: true
});

});

Answer 18

وأنا حلها بطريقة مختلفة.

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

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

$input.datepicker({
    ...
    onChangeMonthYear: function (year, month, inst)
    {
        var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
        if (!isNaN(date))
        {
            input.value = $.datepicker.formatDate("dd M yy", date);
            $input.change();
        }
    }
}

Answer 19

و(يرجى ملاحظة، وهذا ليس سؤال. أنا أحاول أن تكون مفيدة من خلال توفير حل بي منذ حلول أخرى لا يعمل بالنسبة لي).

وأنا لم أستطع الحصول على منتقي التاريخ على البقاء خفية مع أي من الإجابات الأخرى. تقويم سيغلق ومن ثم إعادة فتح. عملت رمز أدناه بالنسبة لي لتغيير زر اليوم لتحديد موعد لليوم الحالي وإغلاق التقويم.

ومسج UI - v1.11.4 v1.11.1 مسج جافا سكريبت مكتبة IE 11.0.28

ولقد تضمنت التخلف بلدي للتأكد من اكتمالها.

    $.datepicker._gotoToday = function(id) {
      var inst = this._getInst($(id)[0]);

      var date = new Date();
      this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
    }

    $.datepicker.setDefaults({
      changeMonth: true,
      maxDate: 'today',
      numberOfMonths: 1,
      showButtonPanel: true
    });