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

206

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

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

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

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

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

  • 7
    Самый популярный ответ лучше принятого. лучше изменить принятый ответ.
  • 0
    мой связанный вопрос stackoverflow.com/questions/25602649/…
Показать ещё 1 комментарий
Теги:
date
jquery-ui-datepicker

18 ответов

572
Лучший ответ

Обновление: появились сообщения, которые больше не работают в Chrome.

Это кратким и выполняет задание:

$(".date-pick").datepicker('setDate', new Date());
  • 101
    Это НАМНОГО лучшее решение, чем принятое решение!
  • 3
    Это решение элегантно
Показать ещё 11 комментариев
199

Вы должны ПЕРВЫЙ вызов 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, я нашел, что это решение - единственный (вменяемый) способ сделать это.
  • 13
    $ (". селектор"). datepicker (). datepicker ("setDate", new Date ()); будет работать и не заставит JQuery дважды искать DOM.
Показать ещё 1 комментарий
68
var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

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

  • 0
    Это работает довольно хорошо, за исключением двух вещей: 1) Я надеялся использовать метод jQuery для получения текущей даты, но, возможно, это не имеет значения. 2) это решение производит значение ровно за месяц до сегодняшней даты!
  • 2
    ОН - ты прав! проверить это - w3schools.com/jsref/jsref_obj_date.asp - месяц 0-11 - вам нужно добавить 1 .. любопытно, getDate 1-31, но getMonth 0-11 ..
Показать ещё 3 комментария
57

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

  • 1
    Почему в вашей демоверсии это работает? Когда я копирую этот код на свой сайт, диалоговое окно продолжает появляться, когда загружается pg.
  • 0
    +1 отлично работает .. спасибо
Показать ещё 3 комментария
25

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

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

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

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

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

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

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

Решение:

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

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

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

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

  • 0
    Этот работает. Прямо к сути! Большое спасибо.
5

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

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

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

$(".date-pick").datepicker().datepicker("setDate", new Date()); 
  • 0
    Это называется цепочкой
  • 0
    Также это работало для меня ....
4
$('input[name*="date"]').datepicker({
        dateFormat: 'dd-mm-yy',
        changeMonth: true,
        changeYear: true,
        beforeShow: function(input, instance) { 
            $(input).datepicker('setDate', new Date());
        }
    });
1

Чтобы предварительно заполнить дату, сначала вы должны инициализировать datepicker, а затем передать значение параметра 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; ?>
  });
1

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

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

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

У вас есть 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());
  • 1
    опция A хороша, потому что средство выбора даты может оставаться пустым до тех пор, пока не будет выбрана дата, в которой по умолчанию используется текущая дата
0

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

$(this).datepicker("destroy").datepicker({
            changeMonth: false, changeYear: false,defaultDate:new Date(), dateFormat: "dd-mm-yy",  showOn: "focus", yearRange: "-5:+10"
        }).focus();
0
var prettyDate = $.datepicker.formatDate('dd-M-yy', new Date());
alert(prettyDate);

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

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

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

  • 0
    Мой браузер не распознал функцию asString (). Я сделал это так: $ (". Date-pick"). Datepicker ('setDate', new Date ());
  • 1
    Я думаю, что asString () должен быть toString ().
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню