We Keep Coding

AnyTime datepicker add a clear button

I am a new to js and am trying to figure out if there is a way to either modify an existing button within AnyTime Datepicker or add a new one that will clear the date from the field.
I see this as a possible solution, but can't figure out where to insert it into the anytime.js to prevent the AnyTime datepicker from breaking:
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
Okay, so I have below that works in Chrome / firefox, but not in IE 9. In IE 9 I click on Clear button and it brings up the date picker. If I click on it twice in IE it will clear the field. How can I get it to be compatible with IE9:
<tr>
<td>
<label class="width100 right displayInlineBlock padBottom5">Received:
<input class="width70 calendarBackground" type="text" maxlength="4000" name="received" id="received" value="<%=report.getFormattedReceived()%>" />
<script>
AnyTime.picker( "received", { format: "%d %b %y", firstDOW: 1 } );
</script>
<input type="button" id="receivedClear" value="Clear" />
<script>
$("#receivedClear").click( function(e) {
$("#received").val("").change(); } );
</script>
</label>
</td>
</tr>
Thanks!

The problem is, the picker appears when the date field has focus, and it constantly updates the field to show the currently-selected date (which defaults to the current date when empty). Therefore, calling change() to bring up the picker should, by design, also populate the field with the current date/time.
If you want to clear the field, you should just call val('') and not bring up the picker. If you want to display the picker, then you should either not clear the field, or be willing to accept that the picker will reset the field to the current time.
I am working on a new picker that will not automatically update the field until the picker is dismissed, but it is still many months from release.

Force user to use jquery datepicker

In my ASP.NET MVC 4 app, I am using the jquery.ui.datepicker.css to implement the datepicker for an input field as follows:
#Html.TextBox("txtDate", new { #class = "date", #title = "(mm/dd/yyyy)"})
When user clicks the textbox, the datepicker (calendar) popups where user can select a date. Some users just prefer to start typing the date instead. How can I force user to use the datepicker instead. I added the attribute #readonly = "readonly" into the textbox but the browsers then make the color of the textbox grayed out making user think that he/she cannot do anything there.
Please help.

I think you should add
style="background:white;"
to make looks like it is writable
<input type="text" id="txtDate" class="date" readonly="readonly" style="background:white;"/>

Cannot configure jQuery datepicker to select default date

I am using the following plugin for a datepicker:
http://xdsoft.net/jqplugins/datetimepicker/
This is a very nice plugin however I am finding it difficult to set a default date when loading the box.
See this fiddle.
$('.datepicker').datepicker();
Box 1 contains 25/12/2013. I want the datepicker to default to this date when the user selects this box. Box 2 contains nothing therefore the box should default to today.
NB This is currently using standard jquery-ui-datepicker.
I have tried setting various options with no success. I have also tried to read where the value is being set but again cannot see where the input is referenced.
Any help would be appreciated.

$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker('setDate', '12/25/13');
FIDDLE
As a sidenote you can set a defaultDate to any datepicker that is submitted if the user doesn't select a date, but that date is not shown as the value of the input
$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker( "option", "defaultDate", '12/25/13' );

In your original question you say you're using third party datepicker plugin, but in your fiddle you're using JQueryUI DatePicker. So here's an example for JQueryUI datepicker.
I'm sure it can be easily updated for the third party plugin.
Try this:
HTML:
Box 1
<input type="text" class="datepicker" value="25/12/2013" />
Box 2
<input type="text" class="datepicker" value=""/>
Javascript:
$('.datepicker').each(function(index){
var dateStr = $(this).attr("value");
var date=new Date();
if(dateStr.length>0)
date=$.datepicker.parseDate("dd/mm/yy", dateStr);
$(this).datepicker({defaultDate:date});
});
JSFiddle: http://jsfiddle.net/HVk7W/3/

Jquery date validation for invalid date entry

I'm implementing jQuery date picker. which can pick date from calendar as well as keyboard entry. When it is picked from the calendar it's working fine.
<input type="text" id="date" />
<script>
$('#date').datepicker ({
dateFormat: 'mm/dd/yy'
}).on("change", function(){
alert("You Entered: "+($(this).datepicker('getdate')));
})
Problem is when I enter, lets say 02/31/2014. which is invalid. I wanted to set a custom message to the user that $ is invalid.
But Jquery is passing on today's date for wrong entries. How can I get exact value of user entry (02/31/2014)?

When using the getdate method of jQuery, Its automatically setting to today's date for an invalid date (not sure why it is lke this in Jquery).
alert("You Entered: "+($(this).datepicker('getdate')));
instead of this use this
alert("You Entered: "+($("#date").val());
Update: Fiddle Demo

jQuery UI date picker - updating another date picker on selecting a date

I have 2 date pickers using the Jquery UI. If the user selects a date from date picker 1, how can I get it to update date picker 2 automatically with the same date?
I think this might be quite simple, but I've tried a few things and nothing seems to work.
Thanks in advance.

The date picker is essentially a text input element. You can use the jquery change handler on the first input element to grab its contents when they change, then simply select the second input element and update the value using jquery val.
http://api.jquery.com/change/
http://api.jquery.com/val/
Something like:
$("#firstdatepicker").change( function() {
$("#seconddatepicker").val($(this).val());
});

You'll want to use the onClose event to update the second text field.
I've created this fiddle here that works; for some reason the styling that's usually on the datepicker is not coming in though.
HTML:
<input type="text" name="date1" value="" />
<br>
<input type="text" name="date2" value="" />
Javascript:
$("input[name=date1]").datepicker({
onClose: function(dateText, inst) {
$("input[name=date2]").val(dateText);
}
});
$("input[name=date2]").datepicker();