2010-04-22 3 views
2

я посмотрел вокруг, прежде чем отправлять на мой вопросJquery: DatePicker: старт/дата окончания

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

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

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

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

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

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

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

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

+0

Вы пытаетесь изменить существующий datePicker? или найти замену? Это один датпикер или два для даты начала и окончания? – Glennular

+0

Я использовал элемент управления thirdparty, и я думаю об использовании jquery datepicker. –

ответ

4

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

HTML

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

очистить форму

  • Дата начала:
  • Дата окончания:
  • Clear

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


});    

+0

@ Крис, я удалил dateText, и он работает, что я хочу, что означает, что я сделал с # 4 –

0
<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> 
0

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

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

Смежные вопросы