从 Datepicker 检索输入数据答案

【问题标题】：Retrieve Input Data from Datepicker从 Datepicker 检索输入数据
【发布时间】：2015-06-11 07:17:01
【问题描述】：

http://www.eyecon.ro/bootstrap-datepicker/

我发现了一个有趣的功能，您可以更改开始和结束日期。

我想知道一些问题。

我应该如何将开始日期和结束日期的值作为参数检索到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>

【问题讨论】：

1) 您可以使用changeDate 事件来设置input 元素的值，该元素可以像标准表单元素一样发送到服务器。 2）从您链接到的页面：weekStart, integer, day of the week start. 0 for Sunday - 6 for Saturday
如何调用 Action 方法？我在您的代码中没有看到它。

标签： javascript jquery html asp.net-mvc twitter-bootstrap

【解决方案1】：

关于您的第二个问题，您可以找到更多信息here

一些代码方便：

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

附加：有一个关于它的重复问题here

【讨论】：