### Using [ES6 Array Initializer][1]

You can [get the number of days in a specified month][2], and then create a new array with that length and each of the days as items.

```js
const getAllDaysInMonth = (month, year) =>
  Array.from(
    { length: new Date(year, month, 0).getDate() },
    (_, i) => new Date(year, month - 1, i + 1)
  );
```

### Demo in Stack Snippets





    const getAllDaysInMonth = (month, year) =>
      Array.from(
        {length: new Date(year, month, 0).getDate()}, // get next month, zeroth's (previous) day
        (_, i) => new Date(year, month - 1, i + 1)    // get current month (0 based index)
      );

    const allDatesInOctober = getAllDaysInMonth(10, 2021)

    console.log(allDatesInOctober.map(x => x.toLocaleDateString([], { month: "short", day: "numeric" })))

    // ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12', 'Oct 13', 'Oct 14', 'Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21', 'Oct 22', 'Oct 23', 'Oct 24', 'Oct 25', 'Oct 26', 'Oct 27', 'Oct 28', 'Oct 29', 'Oct 30', 'Oct 31']




  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
  [2]: https://stackoverflow.com/q/1184334/1366033

is there a way to have all the days of a month or of a year? I am looking for this in order to disable some specific days in a datepicker, i would have a page in the back-office to select these days to disable. 

So i would need to show all the days in a month, and add a "activate or deactive" button below each day. Is there a way to find these days with the Date object? I found this link for example : https://stackoverflow.com/questions/6729497/displaying-all-the-days-of-a-month but i don't really understand it, plus it is Java, i am trying to find a solution in javascript.

Thank you for your help


Find all the days in a month with Date object?

Jquery UI actually exposes this functionality for you and will even return a bonafide `date` type.

Just call [`.datepicker("getDate")`][getDate]

Also, Unobtrusive JavaScript would usually prefer that you not add javascript inline to your HTML.  Instead, you can attach a listener to your datepicker with the `change` event handler

JavaScript:

    $("#datepicker").change(function() {
        var date = $(this).datepicker("getDate");
        $("#placeholder").text(date);
    });

##[Working Demo in Fiddle][fiddle]

[getDate]: http://api.jqueryui.com/datepicker/#method-getDate
[fiddle]: http://jsfiddle.net/KyleMit/SXmZ3/

I'm trying to get the date from the datepicker in jQuery UI and then display the date selected by the user somewhere on the page. The selected date already displays inside the input field of the datepicker, which is great, but i also want to display that exact same value elsewhere on the page inside a div tag.

Get date from datepicker and display it in a div

The javascript is working fine based off the example provided on the [project page][eyecon].

The only thing I can think of is that Javascript library is not loading.  
Try adding the following lines of code to your web page (or their local equivalants)

    <link rel="stylesheet" type="text/css" href="http://kylemitofsky.com/libraries/libraries/datepicker.css">
    <script type="text/javascript" src="http://kylemitofsky.com/libraries/libraries/bootstrap-datepicker.js"></script>

## [Working Demo in Fiddle][fiddle]

If this doesn't work for you, try using the fiddle as a launching off point to ask more targeted questions in the future.

[eyecon]: http://www.eyecon.ro/bootstrap-datepicker/
[fiddle]: http://jsfiddle.net/KyleMit/g2WYe/

i want to use datepicekr as check-in - check-out so I have HTML:

    
    <div class="form-group">
      <label class="col-md-4 control-label" for="datum">Datum: Od</label>  
      <div class="col-md-3">
    <input id="dp1" name="dp1" class="form-control" placeholder="Datum" type="text">
      </div>
      <div class="col-md-3">
    <input id="dp2" name="dp2" class="form-control" placeholder="Datum" type="text">
      </div>
    </div>

I try to make it workable with js:

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
     
    var checkin = $("#dp1").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();
      $("#dp2")[0].focus();
    }).data('datepicker');
    var checkout = $("#dp2").datepicker({
      onRender: function(date) {
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
      }
    }).on('changeDate', function(ev) {
      checkout.hide();
    }).data('datepicker');

but I get error:

    Uncaught TypeError: Cannot read property 'valueOf' of undefined 

What that exactly mean? What I can do to solve this problem? I use the code from official web resource for datepicker for bootstrap...

Datepicker javascript - Cannot read property 'valueOf'

They should be working as in this example:





    $('.datepicker').datepicker({
        startDate: '-3d'
    })

    $(document).on('click', '.fa-calendar', function(){
        $(this).closest('.input-group')
               .find('input.form-control')
               .datepicker("show");
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <p>start with datepicker:</p>
    <input class="form-control datepicker" type="text" /><br/>

    <p>start with icon:</p>
    <div class="input-group">
      <input type="text" class="form-control" >
      <span class="input-group-addon" >
        <i class="fa fa-calendar"></i>
      </span>
    </div>




**References**: 

* [datepicker.css][css]
* [bootstrap-datepicker.js][js]
* [Docs][docs]

[css]: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css
[js]: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js
[docs]: http://eternicode.github.io/bootstrap-datepicker/

I'm using bootstrap-datepicker, and I'm getting this error message:

> Uncaught TypeError: Cannot read property 'split' of undefined 

I don't think I have an old version of datepicker.js because I got the cdn from their website. 

This is how I'm currently instantiating the datepicker and click event:

    j('.fa-calendar').datepicker({
        startDate: '-3d'
    })

    j(document).on('click', '.fa-calendar', function(){
        j('.fa-calendar').datepicker("show");
    }); 

Datepicker date undefined

This is a little bit of a hack job, but you can conditionally hide and show the elements to avoid an infinite loop.  On hide, check if this is the first time attempting to hide.  If the input does not have focus (meaning they have used the dropdown and we've lost our tab order, then refocusing will cause the picker to show.  We'll also catch this show and hide from there, entering back into our original code.  We'll pass back and forth a property on the object so we can manage state.

That will look like this:



    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      if (!this.firstHide) {
        if (!$(this).is(":focus")) {
          this.firstHide = true;
          // this will inadvertently call show (we're trying to hide!)
          this.focus(); 
        }
      } else {
        this.firstHide = false;
      }
    })
    .on('show', function () {
      if (this.firstHide) {
        // careful, we have an infinite loop!
        $(this).datepicker('hide'); 
      }
    })

**Stack Snippet Demo**:






    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      if (!this.firstHide) {
        if (!$(this).is(":focus")) {
          this.firstHide = true;
          // this will inadvertently call show (we're trying to hide!)
          this.focus(); 
        }
      } else {
        this.firstHide = false;
      }
    })
    .on('show', function () {
      if (this.firstHide) {
        // careful, we have an infinite loop!
        $(this).datepicker('hide'); 
      }
    })



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>

If you initialize a [bootstrap datepicker from eternicode][0] with `autoclose: true`, two undesirable behaviors happen:

1. After the picker closes, when you tab into the next field, you'll start at the beginning of the document again.  This can be quite cumbersome on long forms.
2. Because the picker changes the value programatically, any listeners that you have that care about the blur event on the input won't behave properly.  The  blur actually occurs when you select the picker value and the input's value hasn't changed.  Then the bootstrap-datepicker programmatically updates the field so blur is never fired with the new value.

**Here's a demo in stack snippets**:  
*select any field, select a value from the picker, and then hit <kbd>Tab</kbd>





    $(".datepicker").datepicker({
      autoclose: true
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>



According to the answer to [Focus the field after selecting the jQuery UI datepicker][1],  you can tap into the `onClose` or `onSelect` events, but the [bootstrap picker doesn't offer those events][2].

Simply replacing them with `hide` doesn't seem to work either, since the refocusing will create an endless loop that always keeps the picker open any time you try to close it.




    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      $(this).focus();
    });

**Stack Snippet Demo**:






    $(".datepicker").datepicker({
      autoclose: true
    })
    .on('hide', function () {
      $(this).focus();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>
    <input type="text" class="datepicker" /><br/>



[0]: https://github.com/eternicode/bootstrap-datepicker
[1]: https://stackoverflow.com/a/20755786/1366033
[2]: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html

Bootstrap datepicker return focus after select

You only pass in the options (as in `datepicker({ startDate: '+1d'})`) when you're initializing the controller.  Since it's already initialized you don't need to do that.  Instead you want to use the [`setDate()`][1] method and then pass in <del>[the javascript date representation of tomorrow][2]</del> a string representing the relative date like this:



    $('#txtDateOfJourney').datepicker('setDate', "+1d");


### Demo in Stack Snippets





    $('#btnTomorrow').click(function() {     
      $('#txtDateOfJourney').datepicker('setDate', "+1d");
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>

    <input type="text" id="txtDateOfJourney" class="datepicker" />
    <button type="button" id="btnTomorrow" class="btn btn-info">Tomorrow</button>




[1]: https://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setdate
[2]: https://stackoverflow.com/q/3674539/1366033

I have a button which sets the datepicker to tomorrow using the following code:



    $("#txtDateOfJourney").datepicker({ startDate: '+1d'});

But it's not working.

[**Here's a demo in fiddle**](http://jsfiddle.net/86k80L59/)

Any Ideas?

Bootstrap DatePicker - Setting the date to Tomorrow

From your screenshot, it looks like you're not pulling in the **bootstrap-datetimepicker.css** library.  Take a look at your console and make sure you don't have any errors and the library exists in the folder it's looking for and has all the appropriate contents.

It won't look *awful* without the extra css because bootstrap is doing most of the heavy lifting and plugins are usually just taking advantage of Bootstrap's classes and adding a couple of their own to box it all up.

![demo](http://i.imgur.com/arMhgaP.png)

## *With* Library - Working





    $(function() {
      $('#datetimepicker1').datetimepicker();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <div class='col-xs-4'>
      <div class='input-group' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>





## *Without* Library - Broken





    $(function() {
      $('#datetimepicker1').datetimepicker();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <div class='col-xs-4'>
      <div class='input-group' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>




> **P.S.** - It's hard to debug since we have no way of knowing what the files look like in your local `/js/` folder.  In the future, I would suggest using CDN's for online samples so it's easier to share what you're looking at with others.  You can grab distributable static files with cdnjs here:

> * [bootstrap-datetimepicker](https://cdnjs.com/libraries/bootstrap-datetimepicker)
* [moment.js](https://cdnjs.com/libraries/moment.js)

I'm having a bit of trouble making this bootstrap datetimepicker work:

[http://eonasdan.github.io/bootstrap-datetimepicker/][1]

I made a very basic page, here's the code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;" />
    <title>Test page</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
    
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/moment-with-locales.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function()
    {
    	$('#datetimepicker1').datetimepicker();
    });
    </script>
    </head>
    
    <body>
    <div class='col-sm-2'>
    	<div class='input-group' id='datetimepicker1'>
    		<input type='text' class="form-control" />
    		<span class="input-group-addon">
    			<span class="glyphicon glyphicon-calendar"></span>
    		</span>
    	</div>
    </div>
    
    </body>
    </html>

Now, it's not like the plugin doesn't work, it's more like some styles are not applied correctly. Here's a picture to better illustrate what I mean. On the left is what I have and on the right is what I actually want:

![datepicker comparison][2]

As you can see, everything's aligned left instead of centered and things are narrower. Also, there's no hover effect when I run my mouse over the calendar and the current day is not outlined properly. Can anyone tell me what I'm doing wrong?

  [1]: http://eonasdan.github.io/bootstrap-datetimepicker/
  [2]: http://i.stack.imgur.com/Bsdzm.jpg

bootstrap datetimepicker styles not applied correctly

The classes changed from Bootstrap 2 to Bootstrap 3

The [date range markup in the docs][1] is out of date for bootstrap 2:

    <div class="input-daterange">
        <input type="text" class="input-small" />
        <span class="add-on">to</span>
        <input type="text" class="input-small" />
    </div>

But if you go to the [online demo with input ranges][2], you can see the correct markup:

    <div class="input-daterange input-group">
        <input type="text" class="input-sm form-control" />
        <span class="input-group-addon">to</span>
        <input type="text" class="input-sm form-control" />
    </div>


### Demo in Stack Snippets





    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


    <div class="input-daterange input-group" id="datepicker">
      <input type="text" class="input-sm form-control" name="start" />
      <span class="input-group-addon">to</span>
      <input type="text" class="input-sm form-control" name="end" />
    </div>



I'll leave adding a button as an exercise for the reader, but check out how to style [input group buttons in Bootstrap][3]



[1]: http://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#date-range
[2]: http://eternicode.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox
[3]: http://getbootstrap.com/components/#input-groups-buttons

I am trying to use the datepicker from the [datepicker][1] site, but the CSS is not working as it should. 

Here is my output and what I want it to look like:

![What I want it to look like vs What it actually looks like][3]


Here's a [jsFiddle here][2] and the relevant code: 



    <div class="input-daterange">
      <input type="text" class="input" value="2012-04-05" />
      <span class="add-on">to</span>
      <input type="text" class="input" value="2012-04-19" />
      <button type="submit" class="btn btn-default" id='submit'>Submit</button>
    </div>


But I can't tell what part of the css is being overridden to change the display of the datepicker. 


[1]: https://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#date-range
[2]: https://jsfiddle.net/8zjh5d0u/
[3]: http://i.stack.imgur.com/coW0S.png