如何用今天的日期預填充jQuery Datepicker文本框？

Question

我有一個非常簡單的jQuery Datepicker日歷：

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

當然還有HTML ...

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

當用戶調出日歷時，今天的日期會很好地突出顯示給用戶，但是我如何讓jQuery在頁面加載時使用今天的日期來預填充文本框本身，而無需用戶執行任何操作？ 在99％的時間中，今天的默認日期將是他們想要的。

Answer 1

更新：有報告稱此功能不再適用於Chrome。

這很簡潔，可以完成工作（過時）：

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

這不太簡潔，利用鏈接使其可以在chrome中工作（2019-06-04）：

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

Answer 2

您必須先調用datepicker（）>， 然后使用“ setDate”獲取當前日期。

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

在日期選擇器初始化后，或將您的setDate方法調用鏈接起來，如對此答案的注釋中所述

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

它將無法正常工作

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

注意 ： 此處介紹了可接受的setDate參數

Answer 3

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

似乎有效，但是可能還有更好的方法。

Answer 4

setDate()方法設置日期並更新關聯的控件。 方法如下：

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

演示版

如文檔中所述， setDate()愉快地接受JavaScript Date對象，數字或字符串：

新日期可以是Date對象，也可以是當前日期格式的字符串（例如'01 / 26/2009'），從今天起的天數（例如+7）或一串值和句點（y為年，“ m”代表數月，“ w”代表數周，“ d”代表數天，例如“ + 1m + 7d”），或者為null以清除所選日期。

如果您想知道，在構造函數中設置defaultDate屬性不會更新關聯的控件。

Answer 5

設置為今天 ：

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

設置為昨天 ：

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

以此類推， 直到 今天 之前或之后的任何天數。

參見jQuery UI›方法› setDate 。

Answer 6

解決方案是：

$(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！

Answer 7

這個為我工作。

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

Answer 8

此代碼將確保使用日期選擇器的格式：

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

無需重新應用格式，它在datepicker初始化時使用了datepicker預定義的一個（如果已分配！）；）

Answer 9

David K Egghead的代碼運行完美，謝謝！

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

我還設法對其進行了一些修整，並且也有效：

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

Answer 10

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

Answer 11

為了在裝入時將日期選擇器設置為某個默認時間（在我的情況下為當前日期），然后可以選擇另一個日期，語法為：

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

Answer 12

要預填充日期，首先必須初始化datepicker，然后傳遞setDate參數值。

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

Answer 13

只是以為我會加我的兩分錢。 選擇器正在添加/更新表單上使用，因此，如果要編輯現有記錄，則需要顯示來自數據庫的日期，否則，需要顯示今天的日期。 以下對我來說很好：

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

Answer 14

您有2個選擇：

選項A）僅在您單擊輸入時才在日歷中標記為“活動”。

Js ：

$('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", new Date());

Answer 15

嘗試這個

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

Answer 16

這對我來說更好，因為有時我在調用.datepicker('setDate', new Date());遇到麻煩.datepicker('setDate', new Date()); 因為如果我已經使用參數配置了日期選擇器，那會很混亂。

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

Answer 17

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

將prettyDate分配給必要的控件。

Answer 18

用這個：

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

要獲取日期格式的日期，例如：2019年10月10日，這對於用戶而言將更加容易理解。

Answer 19

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

資料來源： http : //www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html