jQuery Date Picker - вимкнути минулі дати


89

Я намагаюся вибрати діапазон дат за допомогою інтерфейсу вибору дати.

у полі від / до люди не повинні мати змогу переглядати або вибирати дати, що передували сьогоднішньому дню.

Це мій код:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        }
    });
});

Чи може хтось сказати мені, як відключити дати, що передували теперішній.

Відповіді:


112

Ви повинні створити новий об'єкт дати і встановити його так, як minDateпри ініціалізації датчиків

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

Редагувати - з вашого коментаря зараз він працює, як очікувалося http://jsfiddle.net/nicolapeluchetti/dAyzq/1/


2
я хочу застосувати такий спосіб, щоб люди не мали змоги вибрати дату, яка минула .. як учора вчора і т. д. Тільки з сьогоднішнього дня і далі.
Харша М. В.

1
@HarshaMV я оновив свою відповідь, вам слід просто встановити minDate при ініціалізації
датчиків

Ви можете додати showAnim:"",до параметра налаштування дати, щоб видалити неприємні зміни місяця та року, коли Ви робите вибір.
Місіу

Я використав ваш сценарій, але отримую повідомлення про помилку "Uncaught ReferenceError: $ не визначено". як я це виправлю?
Мейбл Джордж

@NicolaPeluchetti Це саме те, що мені потрібно, але чи можна це використовувати в asp: Textbox? Я спробував, але це не працює, чи є якісь конкретні зміни, які я повинен зробити? Заздалегідь дякую
wolfQueen

74

Оголосіть змінну dateToday і використовуйте функцію Date (), щоб встановити її .. потім використовуйте цю змінну, щоб призначити minDate, який є параметром datepicker.

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

Ось і все ... Вища відповідь була справді корисною ... так продовжуйте хлопці ..


Чітка та пряма відповідь .. Дякую
ASD


20

Використовуйте опцію "minDate", щоб обмежити найдавнішу дозволену дату. Значення "0" означає сьогодні (через 0 днів від сьогодні):

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

Документи тут: http://api.jqueryui.com/datepicker/#option-minDate


8

Просто додати до цього:

Якщо вам також потрібно заборонити користувачеві вручну вводити дату в минулому, це можливе рішення. Це те, що ми в підсумку зробили (на основі відповіді @Nicola Peluchetti)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

Це робить для зміни значення на сьогоднішню дату, якщо користувач вручну вводить дату в минулому.


6

Демонстрація в прямому ефірі , спробуйте це,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

5

Це простий спосіб зробити це

$('#datepicker').datepicker('setStartDate', new Date());

також ми можемо відключити майбутні дні

$('#datepicker').datepicker('setEndDate', new Date());

1
Дякую! Ви зупинили години розчарування.
lmiguelvargasf

4

встановити атрибут startDate datepicker, він працює, нижче - робочий код

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

2

Документація щодо jQuery API - datepicker

Мінімальна дата вибору. Якщо встановлено значення null, мінімального значення немає.

Підтримується кілька типів:

Дата: об’єкт дати, що містить мінімальну дату.
Кількість: Кількість днів від сьогодні. Наприклад 2представляє two daysвід сьогодні і -1представляє yesterday.
Рядок: рядок у форматі, визначеному dateFormatпараметром, або відносна дата.
Відносні дати повинні містити пари значень і періодів; допустимі періоди yдля years, mдля months, wдля weeks, і dдля days. Наприклад, +1m +7dпредставляє one month and seven daysвід today.

Щоб не відображати попередні дати, крім сьогоднішніх

$('#datepicker').datepicker({minDate: 0});

2

Атрибут " mindate " слід використовувати для вимкнення переданих дат у jquery datepicker.

minDate: new Date () Або minDate: '0' є ключовим для цього.

Ex:

$(function() {
    $( "#datepicker" ).datepicker({minDate: new Date()});
});

АБО

$(function() {
  $( "#datepicker" ).datepicker({minDate: 0});
});

2

просто замініть свій код:

старий код:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

новий код:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

2

Встановивши startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

1

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

Ми використовуємо метод beforeShowDay плагіна jQuery UI datepicker.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

введіть тут опис зображення

Тут сьогодні 15 вересня. Я відключив суботу та неділю.


0

вам потрібно оголосити поточну дату у такі змінні

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})

0
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): функція отримати сьогоднішню дату попередню дату заблоковано. 100% працює


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