Doubts on how to select a week using jquery

Question

      <div class="input-group" id="DateDemo">
          <input type='text' id='weeklyDatePicker' placeholder="Select Week" />
      </div>

  $(document).ready(function(){

  $("#weeklyDatePicker").datepicker({
      format: 'dd/mm/yyyy'
  });

    $('#weeklyDatePicker').change(function(event) {

      var value = $("#weeklyDatePicker").val();
      var firstDate = moment(value, "D/mm/Y").day(0).format("D/mm/Y");
      console.log(firstDate);
      var lastDate =  moment(value, "D/mm/Y").day(6).format("D/mm/Y");
      $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
  });
});

I am wanting to catch the interval of a week with jquery using the plugin Moment().

Ex: Assuming that my Sunday of my week starts 01 and goes until Saturday day 07. When I select a date in that range it gives me the day it starts and ends this week.

Answer 1

Use the method getDate of datepicker to pass the date correctly to the Moment and use the method weekday.

Follow example of code:

 $(document).ready(function(){

  $("#weeklyDatePicker").datepicker({
      format: 'DD/MM/YYYY'
  });

    $('#weeklyDatePicker').change(function(event) {   
      var value = $(this).datepicker('getDate');
      var firstDate = moment(value).weekday(0).format('DD/MM/YYYY')
      
      var lastDate =  moment(value).weekday(6).format('DD/MM/YYYY')
      $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
</script>


<div class="input-group" id="DateDemo">
    <input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>

Answer 2

Probably your problem is in formatting the date.

Please see if this code solves:

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"> </script> 

<div class="input-group" id="DateDemo">
     <input type='text' id='weeklyDatePicker' placeholder="Selecione a Semana" />
</div>

Javascript:

 $(document).ready(function(){

 $("#weeklyDatePicker").datetimepicker({
     format: 'DD-MM-YYYY'
 });

 $('#weeklyDatePicker').on('dp.change', function (e) {
     var value = $("#weeklyDatePicker").val();
     var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
     var lastDate =  moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");
     $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
 });
});

Follows example working Jsfiddle