JQuery DatePicker، كيفية تمييز تاريخ قيمة الإدخال الحالي؟

Question

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

هنا هو الكود الخاص بي:

$('.date_picker').datepicker({ dateFormat: 'dd/mm/yy', duration: '', gotoCurrent: true, defaultDate: -1});

..وهنا ورقة الأنماط:

/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
    /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
    font-family: Verdana, Arial, sans-serif;
    background: #ffffff url(images/ffffff_40x100_textures_01_flat_0.png) 0 0 repeat-x;
    font-size: 0.80em;
    border: 4px solid #dddddd;
    width: 15.5em;
    padding: 2.5em .5em .5em .5em;
    position: relative;
}
.ui-datepicker-div, #ui-datepicker-div {
    z-index: 9999; /*must have*/
    display: none;
}
.ui-datepicker-inline {
    float: left;
    display: block;
}
.ui-datepicker-control {
    display: none;
}
.ui-datepicker-current {
    display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
    position: absolute;
    left: .5em;
    top: .5em;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next {
    left: 14.6em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
.ui-datepicker-next a, .ui-datepicker-prev a {
    text-indent: -999999px;
    width: 1.3em;
    height: 1.4em;
    display: block;
    font-size: 1em;
    background: url(images/888888_7x7_arrow_left.gif) 50% 50% no-repeat;
    border: 1px solid #d3d3d3;
    cursor: pointer;
}
.ui-datepicker-next a {
    background: url(images/888888_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:hover {
    background: url(images/454545_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:hover {
    background: url(images/454545_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-prev a:active {
    background: url(images/222222_7x7_arrow_left.gif) 50% 50% no-repeat;
}
.ui-datepicker-next a:active {
    background: url(images/222222_7x7_arrow_right.gif) 50% 50% no-repeat;
}
.ui-datepicker-header select {
    border: 1px solid #d3d3d3;
    color: #555555;
    background: #e6e6e6;
    font-size: 1em;
    line-height: 1.4em;
    position: absolute;
    top: .5em;
    margin: 0 !important;
}
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover {
    background: #dadada;
}
.ui-datepicker-header select.ui-datepicker-new-month {
    width: 7em;
    left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
    width: 5em;
    left: 9.4em;
}
table.ui-datepicker {
    width: 15.5em;
    text-align: right;
}
table.ui-datepicker td a {
    padding: .1em .3em .1em 0;
    display: block;
    color: #555555;
    background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
    cursor: pointer;
    border: 1px solid #ffffff;
}
table.ui-datepicker td a:hover {
    border: 1px solid #999999;
    color: #212121;
    background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
}
table.ui-datepicker td a:active {
    border: 1px solid #dddddd;
    color: #222222;
    background: #ffffff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
}
table.ui-datepicker .ui-datepicker-title-row td {
    padding: .3em 0;
    text-align: center;
    font-size: .9em;
    color: #222222;
    text-transform: uppercase;
}
table.ui-datepicker .ui-datepicker-title-row td a {
    color: #222222;
}
.ui-datepicker-cover {
    display: none;
    display/**/: block;
    position: absolute;
    z-index: -1;
    filter: mask();
    top: -4px;
    left: -4px;
    width: 193px;
    height: 200px;
}

أنا أستخدم IE7 للاختبار، ولكني أرى نفس السلوك في Firefox.

أي أفكار حول المشكلة؟

Answer 1

بادئ ذي بدء، ما المتصفح (المتصفحات) الذي تشاهد فيه منتقي البيانات؟لقد لاحظت أن بعض ألوان التواريخ/الأقسام داخل منتقي التاريخ تبدو مختلفة IE6 مقارنة بالمتصفحات الأحدث (فايرفوكس 3، كروم، IE7).

على سبيل المثال، يبدو أن IE6 يتجاهل لون الخلفية لأيام نهاية الأسبوع.

يتم التحكم في لون خلفية التاريخ المحدد حاليًا وتاريخ اليوم من خلال CSS.CSS الافتراضي لـ منتقي التاريخ الأخير هل ورقة نمط النباتات الرئيسية, ، على الرغم من أنني أرى أن هناك الإصدار الجديد/ورقة الأنماط لمنتقي التاريخ (لم أحصل على قراءة مناسبة بعد، وأعتقد أنها قد تكون نسخة جديدة) على مسج الموقع هذا الاسبوع.

الأسماء الافتراضية ذات الصلة للفئات الموجودة في ورقة الأنماط والتي قد تحتاج إلى تغيير ألوان الخلفية لها هي -

 /* current input value background color */
.ui-datepicker-current-day
{
    background: #83C948
}
/* today's background color */
.ui-datepicker-today 
{
    background: #83C948
}

يحرر:

إذا كنت تستخدم منتقي التاريخ القديم كما هو, ، فهذه هي الأسطر ذات الصلة في ملف js الإضافي-

this._currentClass = 'ui-datepicker-current-day'; 
// The name of the current day marker class


(printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + ...
// highlight today (if different)

لذلك، سوف تقوم إما

• بحاجة إلى فصول CSS هذه في ورقة الأنماط CSS لتسليط الضوء عليها اليوم وتاريخ محدد حاليًا

أو

• ستحتاج إلى تغيير الأسماء الموجودة في ملف JS بالمكون الإضافي واستخدام نفس الأسماء في ورقة أنماط CSS الخاصة بك

أنا شخصياً سأختار الخيار الأول لأنه من أسماء الفئات المعروفة.

تحرير 2:

ويبدو أن منتقي التاريخ الجديد يستخدم CSS مختلفًا قليلاً لتلوين التاريخ المحدد الحالي وتاريخ اليوم.في حين أن الإصدار السابق صمم خلية الجدول (td) عنصر، الإصدار الجديد يصمم المرساة (أ) عنصر داخل الخلية.

استخدام فايربوغ في Firefox 3 (موصى به للغاية)، يبدو أن CSS للون اليوم هو

.ui-state-highlight, .ui-widget-content .ui-state-highlight 
{
    background:#FFE45C url(../images/?new=ffe45c&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|75) repeat-x scroll 50% top;
    border:1px solid #FED22F;
    color:#363636;
}

وبالنسبة للتاريخ المحدد الحالي في الإدخال، فهو كذلك

.ui-state-active, .ui-widget-content .ui-state-active 
{
    background:#FFFFFF url(../images/?new=ffffff&w=1&h=400&f=png&q=100&fltr[]=over|textures/02_glass.png|0|0|65) repeat-x scroll 50% 50%;
    border:1px solid #FBD850;
    color:#EB8F00;
    font-weight:bold;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

وكلاهما يأتي من إطار عمل jQuery UI CSS

Answer 2

وهذا هو الحل الأفضل:

وحقل الإدخال، حدد الأسبوع.

https://github.com/Prezent/jquery-weekpicker