كيف أقوم بملء مربع نص jQuery Datepicker مسبقًا بتاريخ اليوم؟

https://stackoverflow.com/questions/233553

04-07-2019
|

سؤال

لدي تقويم jQuery Datepicker بسيط جدًا:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

وبالطبع في HTML ...

<input type="text" size="10" value="" id="date_pretty"/>

يتم تمييز تاريخ اليوم بشكل جيد للمستخدم عند عرض التقويم، ولكن كيف يمكنني جعل jQuery يقوم بملء مربع النص نفسه مسبقًا بتاريخ اليوم عند تحميل الصفحة، دون أن يفعل المستخدم أي شيء؟في 99% من الحالات، سيكون التاريخ الافتراضي لهذا اليوم هو ما يريدون.

المحلول

تحديث: هناك تقارير لم تعد تعمل في Chrome.

هذا موجز ويقوم بالوظيفة (عفا عليها الزمن):

$(".date-pick").datepicker('setDate', new Date());

هذا أقل إيصالًا ، باستخدام التسلسل يسمح لها بالعمل في Chrome (2019-06-04):

$(".date-pick").datepicker().datepicker('setDate', new Date());

نصائح أخرى

يجب عليك أولاً الاتصال DatePicker ()> ومن بعد استخدم "setDate" للحصول على التاريخ الحالي.

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

أو سلسلة استدعاء طريقة setDate بعد تهيئة DatePicker ، كما هو مذكور في تعليق على هذه الإجابة

$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

فإنه سوف ليس العمل مع فقط

$(".date-pick").datepicker("setDate", new Date());

ملاحظة : تم وصف معلمات setDate مقبولة هنا

var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

يبدو أنه يعمل ، ولكن قد يكون هناك طريقة أفضل للخروج ..

ال setDate() الطريقة تحدد التاريخ وتحديث التحكم المرتبط. هنا هو كيف:

$("#datepicker1").datepicker({
    dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");

العرض التوضيحي

كما ذكر في الوثائق ، setDate() يقبل بسعادة كائن تاريخ جافا سكريبت أو رقم أو سلسلة:

قد يكون التاريخ الجديد هو كائن تاريخ أو سلسلة بتنسيق التاريخ الحالي (على سبيل المثال '01/26/26 2009) أو عدد من الأيام من اليوم (على سبيل المثال +7) أو سلسلة من القيم والفترات ( سنوات ، "M" لعدة أشهر ، "W" لأسابيع ، "D" لعدة أيام ، على سبيل المثال ، +1M +7D ") ، أو NULL لمسح التاريخ المحدد.

في حال كنت تتساءل ، الإعداد defaultDate الخاصية في المُنشئ لا تحديث عنصر التحكم المرتبط به.

ضبط ل اليوم:

$('#date_pretty').datepicker('setDate', '+0');

ضبط ل في الامس:

$('#date_pretty').datepicker('setDate', '-1');

وهكذا مع أي عدد من الأيام قبل أو بعد، بعدما تاريخ اليوم.

نرى jQuery UI ›الطرق› setDate.

الحل هو:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
    var myDate = new Date();
    var month = myDate.getMonth() + 1;
    var prettyDate = month + '/' + myDate.getDate() + '/' + myDate.getFullYear();
    $("#date_pretty").val(prettyDate);
});

شكرا جرايغوست!

سيضمن هذا الرمز استخدام تنسيق DatePicker الخاص بك:

$('#date-selector').datepicker('setDate', new Date());

لا حاجة لإعادة تطبيق التنسيق ، فهو يستخدم DatePicker الذي تم تحديده مسبقًا بواسطتك على تهيئة DatePicker (إذا قمت بتعيينه!) ؛) ؛)

هذا واحد عمل بالنسبة لي.

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());

كود David K Egghead يعمل بشكل مثالي، شكرًا لك!

$(".date-pick").datepicker(); 
$(".date-pick").datepicker("setDate", new Date());

تمكنت أيضًا من تقليمها قليلاً وقد نجحت أيضًا:

$(".date-pick").datepicker().datepicker("setDate", new Date());

$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });

من أجل تعيين DatePicker على وقت افتراضي معين (التاريخ الحالي في حالتي) عند التحميل ، ثم احصل على خيار اختيار تاريخ آخر يكون بناء الجملة:

    $(function() { 
        // initialize the datapicker
        $("#date").datepicker();

        // set the time
        var currentDate = new Date();
        $("#date").datepicker("setDate",currentDate);

    //  set the options for the button  
        $("#date").datepicker("option",{
            dateFormat: 'dd/mm',
            showOn: "button",
          // whatever option Or event you want 
        });
  });

لتاريخ التمثيل المسبق ، يجب عليك أولاً تهيئة DatePicker ، ثم تمرير قيمة المعلمة setDate.

$("#date_pretty").datepicker().datepicker("setDate", new Date());

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

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });

لديك خياران:

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

شبيبة:

$('input.datepicker').datepicker(
                        {   
                            changeMonth: false,
                            changeYear: false,
                            beforeShow: function(input, instance) { 
                                $(input).datepicker('setDate', new Date());
                            }
                        }                         
                     );

CSS:

div.ui-datepicker table.ui-datepicker-calendar .ui-state-active,
        div.ui-datepicker table.ui-datepicker-calendar .ui-widget-content .ui-state-active  {
            background: #1ABC9C;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            width: 24px; height: 24px;
        }

الخيار ب) الإدخال بشكل افتراضي مع اليوم.يجب عليك ملء منتقي البيانات أولاً.

$("input.datepicker").datepicker().datepicker("setDate", new Date());

var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

تعيين prettydate إلى السيطرة اللازمة.

جرب هذا

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();

هذا يعمل بشكل أفضل بالنسبة لي لأن لدي في بعض الأحيان مشكلات الاتصال .datepicker('setDate', new Date()); لأنه يفسد إذا كان لدي DatePicker تم تكوينه بالفعل باستخدام المعلمات.

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));

$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

مصدر: http://www.kelvinluck.com/assets/jquery/datepicker/v2/demo/datepickerdefaulttoday.html

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow