CODEWITHSUNDEEP
jqueryjquery-uidatepicker
user352985
user352985

Reputation: 361

JQuery Datepicker - no default date

I want to remove the default date in my JQuery Datepicker.

I try the following code:

$(this).datepicker({defaultDate: ''});

But it doesn't seem to work. Today's date is still selected as default.

Upvotes: 27

Views: 70478

Answers (13)

Nagnath Mungade
Nagnath Mungade

Reputation: 1009

You can put null value also like this:

  $(this).datepicker({defaultDate: null});

Upvotes: 0

Fernando Candido
Fernando Candido

Reputation: 1

Works for me:

$(document).ready(function() {
    $("#datepicker .ui-state-active").removeClass("ui-state-active");
    $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight");
    $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today");
});

Upvotes: 0

billmccord
billmccord

Reputation: 98

My solution involves overriding jQuery's append so that we can remove the elements each time the HTML is regenerated and appended to the div. This fixes a flashing of the default date when switching months and it also clears the hover.

(function($) {
    var origAppend = $.fn.append;

    $.fn.append = function () {
        return origAppend.apply(this, arguments).trigger("append");
    };
})(jQuery);

var datePickerDiv = $("#date-picker");
datePickerDiv.bind("append", function() {
  $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over");
  $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover");
});

datePickerDiv.datepicker();

Upvotes: 0

BruceHill
BruceHill

Reputation: 7174

This is actually an open issue with jQuery UI Datepicker. Here is the ticket for the issue:

Ticket 8159

At the heart of this issue is the fact that Datepicker incorrectly handles a defaultDate value of null. Of the solutions offered here, I like that of j-polfer the best and upvoted it for that reason. The reason this solution works, though, is because there is a patch built into the setDate method to clear the selection if null is passed into the date parameter. But I wanted to find out why the Datepicker was not responding correctly to the defaultDate:null in the options, and so I took a look at the source.

I found that I needed to make three changes to the Datepicker source code to fix this issue. Here are the changes that I made:

  1. The method _getDefaultDate returned the current date when defaultDate option was null or missing (This is the heart of the problem).

I changed this method from this...

    _getDefaultDate: function(inst) {
        return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date()));
    }

to this....

_getDefaultDate: function(inst) {
    var def = this._get(inst, "defaultDate");
    return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null;
},
  1. The method _setDate was setting the selected day to the current day when null was passed into the date parameter. I changed to lines to correct this:

I changed this line...

inst.selectedDay = inst.currentDay = newDate.getDate();

to...

inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate();

and this line...

this._adjustInstDate(inst);

to...

if (date != null) {
    this._adjustInstDate(inst);
}
  1. Lastly, the method _generateHTML did not handle a return value of null from _getDefaultDate.

So I changed this line...

    (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ?

to...

(defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ?

That's it. Now the Datepicker defaultDate option responds more intuitively to a value of null being passed in or to this option being missing.

$('#test').datepicker({ altField: '#alt'});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: null});  // No date selected
$('#test').datepicker({ altField: '#alt', defaultDate: 0});  // Today selected
$('#test').datepicker({ altField: '#alt', defaultDate: +1});  // Tomorrow selected
$('#test').datepicker({ altField: '#alt', defaultDate: -1});  // Yesterday selected

Here is a demo in JSFIDDLE: Datepicker demo with defaultDate null

Please note: These changes have not been exhaustively tested, so there may be other issues arising from the fact that _getDefaultDate method now could return null. So do your own testing first! ;)

Hope this helps someone! :)

Upvotes: 7

J. Polfer
J. Polfer

Reputation: 12481

None of the answers at the time of this writing really worked for me, so here was my solution cobbled from a couple of answers (for an inline datepicker).

    $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though
    $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight

Upvotes: 10

Ed DeGagne
Ed DeGagne

Reputation: 3269

I know this is an old question, and I found it because I had the same requirement; do not display a date in the input (textbox), make the user select a date from the datepicker.

The Markup (MVC)

<div class="leftContent">
     @Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})
</div>

HTML Output:

<div class="leftContent">
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn">
</div>

Script (in document ready):

$('.DateShipOn').datepicker({
    constrainInput: true,
    display: true,
    border: true,
    background: true,
    maxDate: "+1m",
    minDate: new Date('@minDate')
});

$('.DateShipOn').datepicker("setDate", new Date());

The effect of the above code is that the input box has the value of the 'minDate' variable in it on display AND when clicking on the input, the datepicker drops down and the 'minDate' is selected by default.

Note: We do not allow manual input, this is the reason for the 'readonly' attribute.

Resolution:

All I had to do, in my case, was comment/remove the line:

$('.DateShipOn').datepicker("setDate", new Date());

The Result:

The effect is that on display;

  • There is no default date value in the input (textbox)
  • The user cannot type in the input (textbox)
  • The date picker drops down with no default date selected
  • The minDate prevents dates prior the minDate value from being selected
  • The maxDate prevents dates after the maxDate value from being selected

Note: For my requirement the '+1m' for maxDate limits the date selection to only the 30 days from the minDate value.

Hope this helps someone out.

Upvotes: 1

Remy Mellet
Remy Mellet

Reputation: 1805

I have the same probleme using inline datepicker. The plugin add on today's cell/td the class .ui-datepicker-current-day and .ui-state-active. My solution is to use a custom class such as .ui-datepicker-selected-day and implements beforeShowDay to handle youself the display of the selected day. Something like that:

$("datepicker").datepicker({
  beforeShowDay: function(date) {
  var dateIso = $.datepicker.formatDate("yy-mm-dd", date);
  var dateSelected = $("input").val();
  var classDate = "";
  if(dateSelected === dateIso){
    return [false,"ui-datepicker-selected-day"];
  }else{
    return [true];
  }
}

Sample of css to put in "highlight" the cell:

.ui-widget-content .ui-datepicker-selected-day .ui-state-active{
  background-color: red;
}
+ disable some css from the plugin

Upvotes: 2

Chris Hall
Chris Hall

Reputation: 905

Based on the answers posted here, I managed to make something that worked. For my purposes, I had an always visible calendar. If you require this for a popup calendar, you should be able to use the existing onSelect handler to perform something similar the first time it's opened. 

$("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active");

Thankfully, it's really that simple with the latest version of jQuery UI (1.10.2 as of this writing). It doesn't appear to interfere with the correct functioning of the widget. The only caveat is that using the getDate getter results in what would have normally been the default selected date.

For the purposes of my code, this is acceptable as my users cannot continue (they don't even have the continue button) until they've clicked on a valid date from the picker. If this isn't the case for you, something like Florian Peschka's answer should get you what you need.

Upvotes: 6

Niraj
Niraj

Reputation: 1842

I used $('.datefield').val('') to show blank instead of showing default date.

Upvotes: 1

Lee Gunn
Lee Gunn

Reputation: 8666

I got round the problem using a hidden altField:

<div id="DatePicker"></div>
<input type="hidden" value="" name="Date" id="Date" />

and the following script:

<script>
    $(function () {

        $('#DatePicker').datepicker({
            altField: '#Date', // ID of the hidden field
            altFormat: 'dd/mm/yy'
        });

        // Remove the style for the default selected day (today)
        $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day');

        // Reset the current selected day
        $('#Date').val('');
    });
</script>

Then, I used the hidden #Date field in my validation routines.

Upvotes: 11

uv.
uv.

Reputation: 344

I had a similar problem, but with a specific behavior.

(As a side note, I think the expected behavior should be to start with the current date in the calendar, but not select it.)

My implementation included an inline calendar with a hidden input altField. What I did was remove the altField option, and add an onSelect function that updated it. This way the today date still looks selected, but the hidden field that represents the real value stays empty.

Upvotes: 0

F.P
F.P

Reputation: 17831

What do you mean by wanting to "remove" the default date?

How do you think the datepicker will open up when he has no month to start from?! You have to have a default date.

Edit on your comment

Set a default date as you want and check, if the user has changed it. If so, he selected a custom date.

Another approach would be to create a variable that is set to true as soon as the user clicks on the datepicker field.

If the user submits the form, you check for that variable. If it's true, the user has selected a date. If not, he didn't touch the datepicker field.

Upvotes: -2

Garis M Suero
Garis M Suero

Reputation: 8169

To open the datepicker dialog it must be opened in some month of some year. I mean, you want to display this dialog and be blank?...

I think if you don't want to pass any default date, the best you can do is get the current date with:

$(document).ready(function() {
  $('#datepicker').datepicker();
});

Passing this will fail, because of given defaultDate, not null but blank

$(this).datepicker({defaultDate: ''});

This is something that will do what intended in the previous code

$(this).datepicker({defaultDate: null});

but it's behavior is the same as the first code block in this answer.

Upvotes: 4

Related Questions