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

238

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

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

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

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

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

Маркус
источник
7
Самый популярный ответ лучше принятого. Лучше изменить принятый ответ.
Ахмадали Шафи
мой связанный вопрос stackoverflow.com/questions/25602649/…
Adrien Be
1
@ahmadalishafiee (и все остальные). В настоящее время принято решение было принято 2015-05-07.
Teepeemm

Ответы:

569

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

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

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

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

$(".date-pick").datepicker().datepicker('setDate', new Date());
CiscoIPPhone
источник
3
Это элегантное решение
скрыто
2
Это тот, который действительно работал для меня, а не принятое решение. Спасибо
Mehdiway
7
Это не будет работать, сначала вы должны вызвать $ (". Date-pick"). Datepicker (); а затем $ (". date-pick"). datepicker ('setDate', new Date ());
Миша Акопов
9
Больше не работает в Chrome после недавнего обновления браузера
Max Flex
3
Работает. Я устанавливаю $(".date-pick").datepicker().datepicker('setDate', new Date()); Тхо
seebiscuit
221

Сначала вы должны вызвать 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
Используя jQueryUI 1.8, я нашел, что это решение - единственный (вменяемый) способ сделать это.
Brianz
13
$ (". селектор"). datepicker (). datepicker ("setDate", new Date ()); будет работать и не заставит JQuery дважды искать DOM.
abc123
1
Отлично, принятый ответ говорит только $ (". Date-pick"). Datepicker ("setDate", new Date ()); и это не работает без первого вызова $ (". date-pick"). datepicker (); ваш ответ намного лучше
Миша Акопов
72
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

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

Лукас
источник
Это работает довольно хорошо, за исключением двух вещей: 1) Я надеялся использовать метод jQuery для получения текущей даты, но, возможно, это не имеет значения. 2) это решение производит значение ровно за месяц до сегодняшней даты!
Маркус
2
ОН - ты прав! проверить это - w3schools.com/jsref/jsref_obj_date.asp - месяц 0-11 - вам нужно добавить 1 .. любопытно, getDate 1-31, но getMonth 0-11 ..
lucas
3
Есть более простой способ .. см. Мой пост ниже.
Рави Рам
Это решение позволяет отображать текст напрямую и одновременно устанавливать дату, в то время как решению CiscoIPPhone требуется еще один шаг, чтобы отобразить значение без открытия средства выбора.
Афшар Мохебби
4
Для setDateвас также можно использовать обычную относительную нотацию DatePicker, например , чтобы получить на следующий день просто наберите .datepicker('setDate', '+1d').
Косия
59

setDate()Метод устанавливает дату и обновляет связанный с ним контроль. Вот как:

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

демонстрация

Как упомянуто в документации, с setDate()радостью принимает объект JavaScript Date, число или строку:

Новой датой может быть объект Date или строка в текущем формате даты (например, «01/26/2009»), количество дней с сегодняшнего дня (например, +7) или строка значений и периодов («y» для годы, «m» для месяцев, «w» для недель, «d» для дней, например, «+ 1m + 7d»), или ноль, чтобы очистить выбранную дату.

Если вам интересно, установка defaultDateсвойства в конструкторе не обновляет связанный элемент управления.

Салман А
источник
1
Почему в вашей демоверсии это работает? Когда я копирую этот код на свой сайт, диалоговое окно продолжает появляться, когда загружается pg.
chobo2
1
Это сработало для меня - принятый ответ и другие варианты выше не.
Лидият
Это гораздо лучшее решение, чем любое из вышеперечисленного.
adamj
Лучший ответ на этот вопрос в настоящее время, хотя мне нужно было, чтобы формат даты был «мм-дд-гг», чтобы соответствовать средству выбора даты.
John81
26

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

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

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

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

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

Смотрите jQuery UI ›Методы› setDate .

KirilleXXI
источник
1
Отлично, как уже упоминали другие, вы, должно быть, уже $(".date-pick").datepicker("setDate", '+0');
вызывали функцию datepicker
Это также работало, как я хотел, так как мой dateFormat должен соответствовать формату даты MySQL (yy-mm-dd). Этот setDate добавляет нулевое заполнение к месяцу и дню.
Jjohn
9

Решение:

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

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

$('#inputName')
  .datepicker()
  .datepicker('setDate', new Date());
Celestz
источник
6

Этот код гарантирует использование формата вашего указателя даты:

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

Нет необходимости повторно применять формат, он использует предопределенный вами DatePicker-1 при инициализации DatePicker (если вы его присвоили!);)

Джефф Жирар
источник
5

Код David K ​​Egghead работал отлично, спасибо!

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

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

$(".date-pick").datepicker().datepicker("setDate", new Date()); 
Гари Медина
источник
4
$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });
quocnguyen
источник
2

Для того, чтобы установить дату выбора на определенное время по умолчанию (текущая дата в моем случае) при загрузке, И затем иметь возможность выбрать другую дату, синтаксис:

    $(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 
        });
  });
maozx
источник
у меня это решение работало в chrome, другие, перечисленные здесь, не работали
Майк Волмар
2

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

$("#date_pretty").datepicker().datepicker("setDate", new Date());
надир
источник
1

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

    $( "#datepicker" ).datepicker();
    <?php if (!empty($oneEVENT['start_ts'])): ?>
       $( "#datepicker" ).datepicker( "setDate", "<?php echo $startDATE; ?>" );
    <? else: ?>
       $("#datepicker").datepicker('setDate', new Date());   
    <?php endif; ?>
  });
Les Mizzell
источник
1

У вас есть 2 варианта:

ВАРИАНТ А) Отмечается как «активный» в календаре, только когда вы нажимаете на входе.

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;
        }​

ВАРИАНТ Б) Ввод по умолчанию с сегодняшним днем. Вы должны сначала заполнить указатель даты.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", new Date ());
Vero O
источник
1
Опция A хороша тем, что средство выбора даты может оставаться пустым до тех пор, пока не будет выбрана дата, в которой по умолчанию будет использоваться текущая дата
восстания с
0
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

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

пользователь Gmail
источник
0

Попробуй это

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();
thejustv
источник
0

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

$("#myDateText").val(moment(new Date()).format('DD/MM/YYYY'));
Alpha2k
источник
0

Использовать это:

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

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

Нихилу
источник
-1
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

Источник: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDefaultToday.html.


источник
Мой браузер не распознал функцию asString (). Я сделал это так: $ (". Date-pick"). Datepicker ('setDate', new Date ());
CiscoIPPhone
1
Я думаю, что asString () должен быть toString ().
rg88
1
DatePicker Кевина Лака и DatePicker пользовательского интерфейса Jquery - два совершенно разных средства выбора даты.
Крейг Хогием
@gamerzfuse jQuery UI DatePicker основан на Кевин Лак.
Матиас Биненс