Получить входные данные от Datepicker

http://www.eyecon.ro/bootstrap-datepicker/Получить входные данные от Datepicker

Я нашел interrested функциональных возможностей, которые вы можете изменить начальную и конечную дату.

Есть несколько вопросов, которые мне интересны.

Как я могу извлечь значение из даты начала и конца даты в бэкэнд asp.net mvc в качестве параметра?
Календарь начинается с воскресенья. Я бы хотел, чтобы это началось с понедельника. Можно ли это сделать?

Сегодня я использую Bootstrap и asp.net mvc.

Спасибо!

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Datepicker for Bootstrap, from Twitter</title> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link href="C:\1\Datepicker for Bootstrap, from Twitter_files\datepicker.css" rel="stylesheet"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="C:\1\Datepicker for Bootstrap, from Twitter_files\jquery.js"></script> 
    <script src="C:\1\Datepicker for Bootstrap, from Twitter_files\bootstrap-datepicker.js"></script> 

    <script> 
    if (top.location != location) { 
    top.location.href = document.location.href ; 
    } 
     $(function(){ 
      window.prettyPrint && prettyPrint(); 
      $('#dp1').datepicker({ 
       format: 'mm-dd-yyyy' 
      }); 
      $('#dp2').datepicker(); 
      $('#dp3').datepicker(); 
      $('#dp3').datepicker(); 
      $('#dpYears').datepicker(); 
      $('#dpMonths').datepicker(); 


      var startDate = new Date(2012,1,20); 
      var endDate = new Date(2012,1,25); 
      $('#dp4').datepicker() 
       .on('changeDate', function(ev){ 
        if (ev.date.valueOf() > endDate.valueOf()){ 
         $('#alert').show().find('strong').text('The start date can not be greater then the end date'); 
        } else { 
         $('#alert').hide(); 
         startDate = new Date(ev.date); 
         $('#startDate').text($('#dp4').data('date')); 
        } 
        $('#dp4').datepicker('hide'); 
       }); 
      $('#dp5').datepicker() 
       .on('changeDate', function(ev){ 
        if (ev.date.valueOf() < startDate.valueOf()){ 
         $('#alert').show().find('strong').text('The end date can not be less then the start date'); 
        } else { 
         $('#alert').hide(); 
         endDate = new Date(ev.date); 
         $('#endDate').text($('#dp5').data('date')); 
        } 
        $('#dp5').datepicker('hide'); 
       }); 

     // disabling dates 
     var nowTemp = new Date(); 
     var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

     var checkin = $('#dpd1').datepicker({ 
      onRender: function(date) { 
      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
      } 
     }).on('changeDate', function(ev) { 
      if (ev.date.valueOf() > checkout.date.valueOf()) { 
      var newDate = new Date(ev.date) 
      newDate.setDate(newDate.getDate() + 1); 
      checkout.setValue(newDate); 
      } 
      checkin.hide(); 
      $('#dpd2')[0].focus(); 
     }).data('datepicker'); 
     var checkout = $('#dpd2').datepicker({ 
      onRender: function(date) { 
      return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
      } 
     }).on('changeDate', function(ev) { 
      checkout.hide(); 
     }).data('datepicker'); 
     }); 
    </script> 

    <style> 
    .container { 
     background: #fff; 
    } 
    #alert { 
     display: none; 
    } 
    </style>  

    </head> 

    <body> 
    <div class="container"> 
    <section id="typeahead"> 




     <div class="row"> 


     <div class="span9 columns"> 




      <div class="well"> 

      <div class="alert alert-error" id="alert"> 
       <strong>Oh snap!</strong> 
       </div> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a></th> 
         <th>End date<a href="#" class="btn small" id="dp5" data-date-format="yyyy-mm-dd" data-date="2012-02-25">Change</a></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td id="startDate">2012-02-20</td> 
         <td id="endDate">2012-02-25</td> 
        </tr> 
       </tbody> 
      </table> 
      </div> 






     </div> 
     </div> 
    </section> 
</div> 

</script> 

    </body> 
</html>

источник

2015-06-11 What' sUP

1) вы можете использовать событие 'changeDate', чтобы установить значение элемента' input', который может быть отправлен на сервер то же, что и стандартный элемент формы. 2) со страницы, на которую вы ссылались: 'weekStart, integer, день недели. 0 за воскресенье - 6 за субботу –

Как вы вызываете метод действия? Я не вижу этого в вашем коде. – noobed

О втором вопросе вы можете найти более подробную информацию here

некоторый код для удобства:

// 0 for Sunday - 6 for Saturday 
    $('#datepickeron').datepicker({ 
     weekStart: 0 
    });

Дополнительная: есть дубликатом вопрос о SO об этом here

источник

2015-06-11 07:42:54 noobed

Получить входные данные от Datepicker

ответ

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