Вибір завантажувача дати завантаження приховати після вибору


97

Як приховати календар після вибору дати? Чи є певна функція, яку я можу використовувати? Мій код нижче:

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

Будь-яка допомога буде вдячна.


6
Чому це не поведінка бібліотеки за замовчуванням?
спорт

Відповіді:


156

Ви можете використовувати подію changedate()для відстеження, коли змінено дату разом із datepicker('hide')методом, щоб приховати datepickerпісля вибору:

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

Демо

ОНОВЛЕННЯ

Це була помилка с autoclose: true. Ця помилка була виправлена ​​в останньому майстрі. ДИВІТЬСЯ COMMIT. Отримайте останній код відGitHub


7
Я рекомендую додатково перевірити, чи поточний режим перегляду "днів": if (ev.viewMode === 'days') {$(this).datepicker('hide');}оскільки ви, мабуть, не хочете приховувати підбірника дати після вибору місяця чи року}
turan

1
Схоже, за замовчуванням автоматичне закриття встановлено на значення false, $(".date").datepicker({... autoclose: true, ... });працює добре!
Дани

45

Якщо це допоможе комусь, Версія 2.0 програми вибору дати завантаження більше не працює з прийнятою відповіддю.

Ось як я це зробив, працюючи над моїм:

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

Див. Http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate


Є версія 2? Я бачу v1.6.4 як останню версію на Github
garryp

Використовуйте автоматичне закриття (див. Відповідь @ Саліма чи оновлену прийняту відповідь), а не обробляти подію вручну. Якщо ви приховуєте підбірника дат, коли змінено дату, спроба ввести дату може спричинити небажану поведінку.
Обличчя


3

Якщо ви хочете змінити поведінку календаря в цілому в усьому світі, спробуйте відредагувати функцію Datepicker (у моєму прикладі це був рядок 82),

з

    this.autoclose = false;

до

    this.autoclose = true;

Для мене добре працювало, оскільки я хотів, щоб усі мої календарі поводилися однаково.


2
Не потрібно змінювати властивості за замовчуванням у бібліотеці js. Ви можете передавати його як властивість об'єкта функції, коли ви викликаєте його. Приклад: $ ('# dob'). Дата-вибір ({формат: 'dd / mm / yyyy', автоматичне закриття: true});
Зеешан

3

Проблему можна зупинити, блокуючи подію приховання для елемента введення цим рядком:

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});


Дякую, друже ! я зліз, тому що введення приховано після вибору дати, і це вирішило мою проблему. Ура!
космічний байкер

3
  1. Просто відкрийте bootstrap-datepicker.js
  2. знайти: var defaults = $.fn.datepicker.defaults
  3. набір autoclose: true

Збережіть і оновіть свій проект, і це має зробити.


2

У завантажувальній програмі 4 використовуйте "autoHide: true"

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

Гарна відповідь Анкіт
Шашанк Сінгх

1

Закрийте підбірку дат, коли виберіть дату (виберіть дату показувати дату з часом)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 

1
$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

0

Я отримав ідеальне рішення:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

0
$('.datepicker').datepicker({
    autoclose: true
}); 

Ще одна відповідь на це питання точно така ж, як і ваша. ОП також має це autoclose: trueу своєму прикладі коду.
93196.93

0

Я змінив на вибір часу та формат на "DD / MM / РРРР"

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

0

Принаймні у версії 2.2.3, яку я використовую, ви повинні використовувати її autoCloseзамість autoclose. Справа з письмом має значення.


0

Ви можете змінити вихідний код, bootstrap-datepicker.js . Додати this.hide();як ne

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

0

Проблеми з годинником все ще відображаються, навіть якщо я написав формат: "YYYY-MM-DD" ,

Я хочу налаштувати pickTime: falseі після зміни-> приховати, що я сфокусувати- > показати

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

0

Для вибору дат

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

0

Використовуйте це для вибору дати, це прекрасно працює

$('#Date').data("DateTimePicker").hide();

0

Я не бачив цього згаданого, але ось це зафіксувало для мене:

switchOnClick: true
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.