Как предварительно заполнить текстовое поле jQuery Datepicker с сегодняшней датой?

У меня очень простой календарь jQuery Datepicker:

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

и, конечно, в HTML...

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

Сегодня дата хорошо подсвечена для пользователя, когда они воспитывают календарь, но как мне получить jQuery для предварительного заполнения самого текстового поля сегодняшней датой на загрузке страницы, без чего пользователь ничего не делает? 99% времени, сегодняшнее значение по умолчанию будет тем, что они хотят.

ОТВЕТЫ

Ответ 1

Обновление: есть сообщения, что это больше не работает в Chrome.

Это краткое и делает работу (устарела):

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

Это менее сжато, использование цепочки позволяет ему работать в Chrome (2019-06-04):

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

Ответ 2

Вы должны ПЕРВЫЙ вызов 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 описаны здесь

Ответ 3

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

казалось, работал, но там может быть лучший выход.

Ответ 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 в конструкторе не обновляет связанный элемент управления.

Ответ 5

Установите сегодня:

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

Установите вчера:

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

И так далее с любым количеством дней до или после сегодняшней даты.

См. jQuery UI > Методы > setDate.

Ответ 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);
});

Спасибо, серый!

Ответ 7

Этот код обеспечит использование формата datepicker:

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

Не нужно повторно применять формат, он использует предопределенный datepicker один из вас при инициализации datepicker (если вы его назначили!);)

Ответ 8

Это работало для меня.

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

Ответ 9

Код Дэвида К Эггхеда работал отлично, спасибо!

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

Мне также удалось немного подрезать его, и он также работал:

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

Ответ 10

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

Ответ 11

Чтобы установить 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 
        });
  });

Ответ 12

Чтобы предварительно заполнить дату, сначала вы должны инициализировать datepicker, а затем передать значение параметра setDate.

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

Ответ 13

Просто подумал, что я добавлю свои два цента. Сборщик используется в форме добавления/обновления, поэтому ему нужно было указать дату, поступающую из базы данных, при редактировании существующей записи или показать сегодняшнюю дату, если нет. Ниже работает отлично для меня:

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

Ответ 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) Вход по умолчанию с сегодняшним днем. Сначала вы должны заполнить дату.

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

Ответ 15

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

Назначьте prettyDate нужному элементу управления.

Ответ 16

Попробуйте это

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

Ответ 17

Это работает лучше для меня, поскольку иногда у меня возникают проблемы с вызовом .datepicker('setDate', new Date());, поскольку он бесполезен, если у меня уже установлен параметр datepicker с параметрами.

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

Ответ 18

Используйте это:

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

Получить дату в формате, например: 10 октября 2019 года, что будет более понятным для пользователей.