it-swarm.com.ru

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

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

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

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

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

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

226
Marcus

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

Это сжато и делает работу:

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

Вначале вы должны вызвать 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());

NOTE: Приемлемые параметры setDate описаны здесь

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

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

71
lucas

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

56
Salman A

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

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

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

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

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

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

25
KirilleXXI

Решение:

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

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

9
Marcus

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

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

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

7
Jeff Girard

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

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

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

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

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

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

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

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

У вас есть 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;
        }​

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

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

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

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

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

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

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

0
gmail user

Попробуй это 

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

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

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