jQuery DateTime picker

Question

Hi,

I have a textbox with jquery ui datetime picker. When i open the page jquery clears my textbox.(Textbox has a default value) Is there any way to prevent this action?

View:

<div class="editor-field">
                <%: Html.TextBoxFor(model => model.Start, String.Format("{0:g}", Model.Start)) %>
                <%: Html.ValidationMessageFor(model => model.Start) %>
</div>

.js

$(document).ready(function () {
$("#Start").datepicker({
        showOn: 'button',
        buttonImage: '../../Content/img/cal.jpg',
        buttonImageOnly: true,
    });
$( "#Start, #End").datepicker( "option", "showAnim", 'slideDown' );
});

Thank you, Peti

Answer 1

I'd need to see your code, but the jquery datepicker plugin doesn't clear the textbox. I use it all the time on my web apps, and I have never experienced that behavior.

Perhaps you have some other lines of code interfering? Can you post your code?

Edit: The html output of those Mvc helper commands would be more useful, anyway I can take a guess: the date in the textbox gets rendered in a format that Jquery datepicker doesn't recognize. Since datepicker enforces valid date format, maybe the presence of a wrongly formatted date in the textbox makes the plugin delete it.

Answer 2

Can you grab the value before the call and then set it again after?

$(document).ready(function () {
    var default_date = $("#Start").val();
    $("#Start").datepicker({
            showOn: 'button',
            buttonImage: '../../Content/img/cal.jpg',
            buttonImageOnly: true,
        });
    $( "#Start, #End").datepicker( "option", "showAnim", 'slideDown' );
    $("#Start").val(default_date);
});

That said, I'm guessing that there's some other problem. It's been a while since I've used the datepicker plugin, but I can't imagine it's setup to blow out a valid date value from the input when you create it.

Can you post your code somewhere like Pastebin?

EDIT:

Oh, you're right about the format. The default date format it expects is mm/dd/yy. What you'll want to do is set the date format option to reflect your particular format. You'll also want to strip off the time component from the date value. The code would look something like this (may not be 100% coreect):

$(document).ready(function () {
    var date_stripped_of_time = $("#Start").val().substring(0, 10);
    $("#Start").val(date_stripped_of_time);
    $("#Start").datepicker({
            showOn: 'button',
            buttonImage: '../../Content/img/cal.jpg',
            buttonImageOnly: true,
            dateFormat: 'yy.mm.dd',
        });
    $( "#Start, #End").datepicker( "option", "showAnim", 'slideDown' );
});

You can read more by looking at the options tab in the DatePicker documentation, and the formatDate documentation to see what you can use for the dateFormat string.