DatePicker

DatePicker

Have jQuery Date Picker Default to the 1st Day of Next Month?


I see that the  defaultDate  can easily be set to a specific date, or to a date that is a number of days, weeks, month, or years in the future or past. But is there a way to ...

  1. have the defaultDate default to the first day of the next month?  or ...
  2. have the date picker default to the first day of a month no matter what day the user selects for that month? 



Any help will be greatly appreciated, as my boss is trying to save money by having inexperienced me work on this project instead of hiring a seasoned jQuery veteran.

I have used your code. Now the problem arised is:
1. For Instance today's date is 20th Dec. It will highlight 20th dec, n it will highlight 20th date for every month which i did.
2. But when i changed my date suppose from 20th to 21st. then the 21st date for every month should get highlighted. 
3. And in december (i.e. current month in this senario) should highlight both 20th (current date ) and 21st (Selected Date) date.

Here is my code:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script>
      $(document).ready(function() {
         var date = new Date(); 
var newDate=date.getDate();       
         date.setDate(date.getDate());         
         console.log('month',date.getMonth()+1);
         $('#datepicker').datepicker({
              onChangeMonthYear: function(year, month, inst) {                
                    // Adjust the datepicker to select first day when month or year is changed.
                    $(this).datepicker( "setDate", year + "/" + month + '/'+newDate);                    
              },
              dateFormat: "yy/mm/dd",
              defaultDate: date
        }); 
      });     
  </script>
</head>
<body style="font-size:62.5%;">
 
<div id="datepicker"></div>
</body>
</html>

Pls guid me the solution for this,


Thanks in advanced,
Gauri Rane