CODEWITHSUNDEEP
jqueryjquery-ui
Fellow Stranger
Fellow Stranger

Reputation: 34013

Prevent jQuery datepicker to set date automatically

I'm having a fully functional jQuery datepicker displayed inline below an input field.

I'm referencing that field with the setting: 

altField: "#id_of_field",

There are no other settings. Datepicker is loaded with document ready.

My problem is that today's date is set (in the input field) automatically on load of page, disregarding the field's state - no matter if it already has value sent from server or is yet not set.

How do I prevent datepicker from setting a value (by it self) in the input field before the user has clicked any date?

UPDATE
Demo: http://jsfiddle.net/2EYFE/3/

Upvotes: 1

Views: 9560

Answers (4)

Fellow Stranger
Fellow Stranger

Reputation: 34013

I had hoped for datepicker offering a setting to turn off automatically setting the date, but appearently no.

Here's a working solution, with a mix of the other answers.

I'm storing the field's value in a variable before starting datepicker, and then replacing datepicker's choice of value with the variable. 

var begin_day_value = $('#event_begin_day').attr('value');

$('#datepicker').datepicker({
    altField: "#event_begin_day"
  }).datepicker('setDate', begin_day_value);

http://jsfiddle.net/2EYFE/5/

Upvotes: 1

Kristian Vitozev
Kristian Vitozev

Reputation: 5971

Using setDate method you can clear input field state this way:

$("#myDate").datepicker();
$("#myDate").datepicker('setDate', null);

Edit: http://jsfiddle.net/2EYFE/4/

Upvotes: 2

AntouanK
AntouanK

Reputation: 4968

Why not using the defaultDate option when you create the datepicker? It's the proper way to set a default value by yourself

http://api.jqueryui.com/datepicker/#option-defaultDate

var myDefaultDate = new Date("October 1, 1975 11:13:00"); // save your default date here

$('#datepicker').datepicker({
    altField: "#event_begin_day",
    defaultDate: myDefaultDate
});

Upvotes: 2

mishik
mishik

Reputation: 10003

Datapicker assigns different classes to selected and current dates. You can either remove the class from current date cell or override it:

current date - ui-state-highlight

selected date - ui-state-active

So, for example:

$("#your_element").datepicker();
$(".ui-datepicker .ui-state-hihglight").removeClass("ui-state-highlight");

Upvotes: 0

Related Questions