Retrieve Input Data from Datepicker

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

I found a interrested functionality that you can change the start and end date.

There are some qustions that I'm wondering.

How should I retrieve the value from the start date and end date into asp.net mvc's backend as a parameter?
The calender starts with sunday. I would like it to start with Monday. Is it possible to do it?

Today, I'm using Bootstrap and asp.net mvc.

Thanks!

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

Upvotes: 0

Answers (1)

noobed

Reputation: 1339

About your second question you can find more information here

some code for ease:

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

Additional: there is a duplicate question on SO about it here

Upvotes: 1

Retrieve Input Data from Datepicker

Answers (1)

Related Questions