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