ฉันจะเติมกล่องข้อความ jQuery Datepicker ล่วงหน้าด้วยวันที่วันนี้ได้อย่างไร

ฉันมีปฏิทิน DatePicker ที่ง่ายมาก jQuery:

$(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());

รัดกุมน้อยกว่าการใช้การโยงให้อนุญาตให้ทำงานในโครเมี่ยม (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()ยอมรับวัตถุ JavaScript วันที่หมายเลขหรือสตริงอย่างมีความสุข:

วันที่ใหม่อาจเป็นวัตถุ Date หรือสตริงในรูปแบบวันที่ปัจจุบัน (เช่น '01 / 26/2009 ') จำนวนวันนับจากวันนี้ (เช่น +7) หรือสตริงของค่าและจุด (' y 'สำหรับ ปี '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);
});

ขอบคุณ Grayghost!

รหัสนี้จะรับรองการใช้รูปแบบ 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; ?>
  });

คุณมี 2 ตัวเลือก:

ตัวเลือกก) ทำ เครื่องหมายว่า "ใช้งานอยู่" ในปฏิทินของคุณเฉพาะเมื่อคุณคลิกที่อินพุท

เจส :

$('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;
        }​

ตัวเลือก B)ป้อนข้อมูลตามค่าเริ่มต้นด้วยวันนี้ คุณต้องใส่ datepicker ก่อน

$ ("input.datepicker"). datepicker (). datepicker ("setDate", ใหม่ Date ());

var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(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'));

ใช้สิ่งนี้:

$(".datepicker").datepicker({ dateFormat: 'dd-M-yy' }).datepicker('setDate', new Date());

เพื่อรับวันที่ในรูปแบบเช่น: 10-Oct-2019 ซึ่งผู้ใช้จะเข้าใจได้มากขึ้น

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

ที่มา: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html