Set date to be initially empty in bootstrap-datepicker

Question

I am using the bootstrap-datepicker in my site. The datepicker will be used to define search filters. I need the initial value of the datepicker input element to be empty, so it will not introduce the date filter for the search results. When the user clicks on the text input linked to Datepicker, the Datepicker popup box should select the first day of next month.

Problem: If I were to set an initial date (as shown below), the text input will be populated with today's date which is not what I want. However if i do not set the initial date, the datepicker will show 1970s. What should I do?

Similar to: The demo for jQueryUI Datepicker

JS Code

var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();

HTML Code

<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />

Failed Attempt

Datepicker does not popup on clicking the text input el

$(function() {

    var now = new Date();
    var nextMonth = new Date();
    nextMonth.setDate(1);
    nextMonth.setMonth(now.getMonth() + 1);
    var prettyDate =  nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
    $('#listing_filter_available').val('');  // clear the date filter
    $('#listing_filter_available').click( function() {
        $('#listing_filter_available').val(prettyDate);
        $('#listing_filter_available').datepicker();
    });

});

Answer 1

I just encountered a very similar use case. With a couple of tweaks to bootstrap-datepicker.js, I believe I've got it working.

You'll need to edit the script in two places.

For the date field, I'm checking to see if the date (this.date) is set to the Unix start date (.e.g blank date). If so, exit and leave the field blank.

(line: 95 - approx)

    setValue: function () {
        // EDIT - Don't setValue if date = unix date start
        if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
        // END EDIT

For the drop down calendar, I'm also checking to see if the date (this.date) is set to the Unix start date. If so, set the date to today. I'm doing this so that when a user clicks on the date field, it displays the current month as opposed to Feb 1970.

(line: 144 - approx)

fill: function () {

      //  EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
            var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
      //  original code
            //    var d = new Date(this.viewDate),
      //  END EDIT 

I believe that's all you need to do. I've just implemented this in my solution, so if anybody finds any issues or has any better suggestions, I'd love to hear.

Answer 2

There is a much easier way to do this! To set a value

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

To set a blank value

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');

Answer 3

I ran into a similar issue and this works for me.

$(".date-picker").datepicker("setDate", "");

So now when my page loads it defaults to empty, the field isn't required so they don't have to pick a date and my controller will take care of that, or they can pick a date and the controller will take care of it as well.

Answer 4

In Recent versions of bootstrap, I am using Bootstrap V3.3.6 & Boostrap-timepicker V0.5.2, the following works nice and simply:

$('#txtTimepicker').timepicker().val('');

For my personal case I do a condition check inside the val set using MVC razor syntax to distinguish between an "add" and "edit" like so:

$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');

To make mine work 100% as required, I explicitly set the input value and the following options:

.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})

For more options, either check the source code file or this link

Answer 5

It's not going to be possible without editing bootstrap-datepicker.js

the default date come from value= and if you leave it empty it correspond to 01-01-1970 (unix date start).

Even if you place a big fat bounty on the question, there's too much work.

I recommend you find a different plugin.

I'm not so sure about the jQuery UI datePicker since there's incompatibility with twitter boostrap https://github.com/twitter/bootstrap/issues/156

Answer 6

I am working with bootstrap v3.1.1 and

$('#listing_filter_available').datepicker('setValue', nextMonth);

didn't work for me.

You have to use

$('#listing_filter_available').datepicker('setDate', nextMonth);

to populate the datepicker control

Answer 7

For the latest version

$("input[type=date]").datepicker({ defaultViewDate: {} });

Source: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate

Answer 8

I had the same problem, I came out with this workaround, I made a function to retrieve the date:

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

Note : i'm trying to standardize every getter and setter in order to have the possibility to change the datepicker plugin in the future

Answer 9

If you can not find such functionality, do not edit the sources. Be smart. Look for the CSS class 'active' and remove it dynamically or override the rule in the style sheet.

For example, override this rule (use stronger selector for your datepicker):

datepicker td.active, .datepicker td.active:hover {
    background-color: #006dcc;
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

or dynamically remove this class, using js.

Answer 10

This one is my favourite

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});