Як попередньо заповнити текстове поле jQuery Datepicker сьогоднішньою датою?


237

У мене дуже простий календар jQuery Datepicker:

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

і звичайно в HTML ...

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

Сьогоднішня дата приємно виділяється для користувача, коли він відкриває календар, але як мені змусити jQuery попередньо заповнити текстове поле сьогоднішньою датою при завантаженні сторінки, не виконуючи нічого користувача? У 99% часу сьогоднішнім за замовчуванням датою буде те, що вони хочуть.


7
Найпопулярніша відповідь - краще, ніж прийнята відповідь. краще змінити прийняту відповідь.
ahmadali shafiee

моє пов'язане питання stackoverflow.com/questions/25602649/…
Adrien Be

1
@ahmadalishafiee (та всі інші). Наразі прийняте рішення було прийнято 2015-05-07.
Teepeemm

Відповіді:


569

Оновлення: Є звіти, це більше не працює в Chrome.

Це стисло і робить роботу (застарілу):

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

Це менш стисло, використання ланцюга дозволяє йому працювати в хромі (2019-06-04):

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

3
Це рішення елегантне
приховане

2
Це те, що насправді працювало на мене, а не прийняте рішення. Дякую
Мехдівей

7
Це не спрацює, спочатку слід зателефонувати $ (". Date-pick"). Datepicker (); а потім $ (". date-pick"). datepicker ("setDate", нова дата ());
Міша Акопов

9
Більше не працює в Chrome після останнього оновлення браузера
Max Flex

3
Працює. Я встановлюю $(".date-pick").datepicker().datepicker('setDate', new Date()); Тхо
seebiscuit

221

Ви повинні ПЕРШИЙ дата вибору виклику ()> а потім використовувати "setDate", щоб отримати поточну дату.

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

АБО ланцюг виклику методу setDate після ініціалізації вашої дати вибору, як зазначено в коментарі до цієї відповіді

$('.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", нова дата ()); буде працювати і не змушує jQuery шукати DOM двічі.
abc123

1
Відмінна, прийнята відповідь говорить лише $ (". Date-pick"). Datepicker ("setDate", new Date ()); і він не працює без першого дзвінка $ (". date-pick"). datepicker (); Ваша відповідь набагато краща
Міша Акопов

71
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 ..
Лукас

3
Є простіший спосіб .. дивіться мій пост нижче.
Раві Рам

Це рішення давайте відображатимемо текст безпосередньо та встановлюємо дату одночасно, тоді як для рішення CiscoIPPhone потрібен ще один крок, щоб показати значення без відкриття вибору.
Afshar Mohebbi

4
Для setDateвас також можна використовувати звичайну відносну нотацію DatePicker, наприклад , щоб отримати на наступний день просто наберіть .datepicker('setDate', '+1d').
kosii

59

setDate()Метод встановлює дату і оновлює пов'язаний з ним контроль. Ось як:

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

Демо

Як зазначено в документації, з setDate()радістю приймає об’єкт, номер або рядок дати JavaScript:

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

Якщо вам цікаво, встановлення defaultDateвластивостей у конструкторі не оновлює пов'язаний елемент управління.


1
Чому це у вашій демонстрації це працює. Коли я копіюю цей код на свій сайт, діалогове вікно з'являється, коли завантажується файл.
chobo2

1
Це спрацювало для мене - прийнята відповідь та інші варіанти вище не відповіли.
лідіят

Це набагато, набагато краще рішення, ніж будь-яке з перерахованого вище.
adamj

Найкраща відповідь на це питання на даний момент, хоча мені потрібен був формат дати "мм-дд-у", щоб відповідати вибору дати.
John81

26

Встановити сьогодні :

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

Встановити вчора :

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

І так з будь-якою кількістю днів до або після сьогоднішньої дати .

Див. Інтерфейс jQuery ›Методи› setDate .


1
Чудово, як вже згадували інші, ви, мабуть, так уже називали datepicker (),$(".date-pick").datepicker("setDate", '+0');
jwbensley

Це також працювало так, як я хотів, оскільки моя датаFormat повинна відповідати формату дати 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

Цей код гарантує використання формату вашої дати вибору:

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

Не потрібно повторно застосовувати формат, він використовує заздалегідь визначений датчик-один при ініціалізації ініціалізатора (якщо ви його призначили!);)


7

Цей працював на мене.

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

5

Код Девід К Еггед працює прекрасно, дякую!

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

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

це рішення працювало на мене в хромі, інші перераховані тут не були
Майк Волмар

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

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

ВАРІАНТ B) Введіть за замовчуванням сьогодні. Ви повинні спочатку заповнити дату вибору.

$ ("input.datepicker"). datepicker (). datepicker ("setDate", нова дата ());

1
варіант А хороший тим, що інструмент для вибору дати може залишатися порожнім до тих пір, поки не буде вибрано дату, в яку він буде встановлений за замовчуванням на поточну дату
восковий сатиричний

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

Призначте красуню Дату необхідного контролю.


0

Спробуйте це

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

0

Це працює для мене краще, оскільки іноді у мене виникають проблеми з викликом .datepicker('setDate', new Date());під час помилок, якщо у мене вже вибраний датчик, налаштований з параметрами.

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

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 Kevin Luck та користувальницький інтерфейс Jquery DatePicker - це два дуже різних підбирачі дат.
Крейг Хугіем

@gamerzfuse jQuery інтерфейс інтерфейсу jQuery заснований на даних Кевіна Удачі.
Матіас Байненс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.