How to Fetch all dates without sunday using jQuery?-Twitter bootstrap

AjayKumar
September 18, 2019
245 views
0 votes
2 Answers

I want to fetch the all dates of month. in format like {2019-9-17} but I don’t want to include Sunday in that day. Suppose I have 30 days in a month, and let’s assume we have 4 Sundays, I just want to print all dates except Sundays.

PS: I am using datepicker, passing month and year with the help of jQuery datepicker

  onClose: function() {
     var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
     var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
     $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
     var my_month=(parseInt(iMonth) + 1);
     console.log('datepicker month='+my_month);

      $('.test').empty();  
      var date = new Date();
      var month = date.getMonth();
      var current_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
      //console.log(current_date);
      date.setDate(1);
      var all_days = [];
      var week = [];

      while (date.getMonth() == month) {
          // Getting all days from here and storing in array named as all)days();
          var d = date.getFullYear() + '-' + my_month.toString().padStart(2, '') + '-' + date.getDate().toString().padStart(2, '0');
          all_days.push(d);

          date.setDate(date.getDate() + 1);

          //$('.test').append(all_days);
      }
console.log(all_days);

$(document).ready(function() {
    $('#txtDate').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'MM yy',
      minDate:0,
      
      onClose: function() {
         var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
         var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
         $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
         var my_month=(parseInt(iMonth) + 1);
         console.log('datepicker month='+my_month);
     
          $('.test').empty();  
          var date = new Date();
          var month = date.getMonth();
          var current_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
          //console.log(current_date);
          date.setDate(1);
          var all_days = [];
          var week=[];
          while (date.getMonth() == month) {
              var d = date.getFullYear() + '-' + my_month.toString().padStart(2, '') + '-' + date.getDate().toString().padStart(2, '0');
              all_days.push(d);
         
              date.setDate(date.getDate() + 1);

              $('.test').append(all_days);
          }

          console.log(all_days);
      },
        
      beforeShow: function() {
        if ((selDate = $(this).val()).length > 0) 
        {
           iYear = selDate.substring(selDate.length - 4, selDate.length);
           iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
           $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
        }
     },
   });
 });

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="style2.css">
    <style>
    body
{
    font-family:Arial;
    font-size : 10pt;
    padding:15px;
}

.ui-datepicker-calendar {
    display: none;
}

    </style>

   
    <title>yes</title>
</head>
<body>

<form action="process.php" method="post"> 
Select Date : <input type='text' id='txtDate' name="mydate" />
<input type="hidden" name="ak" id="ak">
</form>

<div class="test"></div>


</body>
</html>

Answers

You just have to change your while to check if date.getDay() is !== 0:

while (date.getMonth() == month) {
//Getting all days from here and storing in array named as all)days();
    if (date.getDay() === 0){
        continue;
    }
    var d = date.getFullYear() + '-' + my_month.toString().padStart(2, '') + '-' + date.getDate().toString().padStart(2, '0');
    all_days.push(d);


    date.setDate(date.getDate() + 1);

    //$('.test').append(all_days);
}

I like that function getDaysInMonth it easy to understand, so I extended it

/**
 * 
 * @param {int} The month number, 0 based
 * @param {int} The year, not zero based, required to account for leap years
 * @param {Array} Which days to exclude Sunday is 0, Monday is 1, and so on.
 * @returns {Date[]} List with date objects 
 */
function getDaysInMonthWithExclude(month, year, excludeweekdays) {
    var date = new Date(Date.UTC(year, month, 1));
    var days = [];
    while (date.getMonth() === month) {
        if (excludeweekdays.indexOf(date.getDay()) === -1) {
            days.push(new Date(date));
        }
        date.setDate(date.getDate() + 1);

    }
    return days;
}
console.log(getDaysInMonthWithExclude(8, 2019, [0]));

Please signup or login to give your own answer.

Click here to cancel reply.