Jquery: DatePicker: дата начала / окончания

Question

Я посмотрел вокруг, прежде чем опубликовать свой вопрос

после того, что я ищу в моем указателе даты (даты начала и окончания):

1) Дата начала: может быть любой датой (пользователь может выбрать дату начала (текущую) для любой будущей даты.

2) Дата начала: пользователь может выбрать дату начала как 6 месяцев. пример: если сегодня 22.04.2010, то я могу вернуться к 11/22/2009 , но не более 6 месяцев.

3) Дата начала Если пользователь выберет дату начала (текущую, будущую, а не прошедшую) менее чем через 10 дней, тогда я хотел бы предупредить сообщение о том, что "нужно хотя бы 10 дней"

4) Дата окончания: должна быть от текущей даты до будущих, все предыдущие даты отключены.

5) ** Дата начала / Дата окончания: ** не должна превышать один год.

Большое спасибо.

PS: не уверен, что я слишком много спрашиваю здесь:)

Answer 1

Я ответил на аналогичный вопрос для друга. Ему нужна была похожая каскадная дата, но я думаю, что вы можете увидеть, как решить проблему, если посмотрите на мою разметку.

HTML

  <form target="_self" action="ClearForm.aspx">

Наглядная форма

• Дата начала:
• Дата окончания:
• Очистить

JS

<script type="text/javascript">
$(document).ready(function () {

  $('#endDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect: function () { },
      onClose: function () { $(this).focus(); }
    });


  $('#startDate').datepicker({ showOn: 'button',
      buttonImage: '../images/Calendar.png',
      buttonImageOnly: true, onSelect:
        function (dateText, inst) {
          $('#endDate').datepicker("option", 'minDate', new Date(dateText));
        }
      ,
      onClose: function () { $(this).focus(); }
    });


});             

Answer 2

Я предпочитаю написать конфигурацию по умолчанию для средства выбора даты, используя класс, чтобы он работал с более чем одним с меньшим количеством дубликатов.

onSelect: function(dateText, inst){
    // Check if _until exists and auto set mindate
    if(inst.id.contains("_from")){
        $("#"+inst.id.replace("_from", "_until")).datepicker("option", "minDate", dateText);
    }
}

Это работает при условии, что идентификаторы формы соответствуют.Например, я использую date_until и date_from

Answer 3

<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({        
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                 var $endDate = $('#tbStartDate').datepicker('getDate');
                 $endDate.setDate($endDate.getDate() + 1);
                 $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

            var $endDate = $('#tbStartDate').datepicker('getDate');
            $endDate.setDate($endDate.getDate() + 1);
            $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
    });
</script>