Как предварительно заполнить текстовое поле 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

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

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

Answer 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 
        });
  });

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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