CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
John
John

Reputation: 1499

DatePicker JQUERY-UI control not responding to formatting

Hi Folks i'm pulling my hair out with this one.

I cannot make a date picker JQUERY UI control respond to anything, the folowing code shows the alerts but the date picker is just default settings regardless of what values i set. In the code below I just get one month displayed and no default date is set :

$(document).ready(function () {

    onload:
    {
        alert(1);
        $('#FirstPeriodReconDate').datepicker({ defaultDate: "+1w",
            changeMonth: false,
            numberOfMonths: 3
        });
        alert(2);........

As a last ditched attempt I just upgraded my version of JQUERY but still the same, its made no difference. In my application I set values with the datepicker and its used extensively and all is good. This is the first time i've needed to make any changes to the control instance. I've stripped out all my other JQUERY code and just left a simple example now and still nothing.

Here is an extract from my HTML markup. NB the control can be referenced fine the form saves back to database and displays values etc. Like I say everything works except when i try to alter teh control properties :

                    <li>
                        <label for="FirstPeriodReconDate">
                            <strong>First Recon Date:</strong>
                            </label>
                        <%= Html.TextBox("FirstPeriodReconDate", String.Format("{0:dd/MM/yyyy}",

Model.PaymentFrequency.FirstPeriodReconDate), new { @class = "date" })%> <%= Html.ValidationMessage("FirstPeriodReconDate", "*")%>

Anyone suggest anything, J

I just notice that I have global code thats included and running against all my DATE fields, this appears to be ovveriding and executing after my new code is running. Not figured it out yet but may need to create a new class so that I can have custom behavior where needed. i have a global.js that has this in it :

$(function() { $('.date').datepicker({ showOn: 'button', buttonImage: $("#AbsolutePath").val() + 'Content/images/Control_MonthCalendar.bmp', buttonText: 'Enter Date', buttonImageOnly: true, dateFormat: 'dd/mm/yy', yearRange: '-20:+50', changeMonth: true, changeYear: true }); ............

Upvotes: 0

Views: 372

Answers (2)

Constant Learner
Constant Learner

Reputation: 525

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-    ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
    $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30" /></p>

<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the      year' yy</option>
</select>
</p>

Upvotes: 0

Tariq M Nasim
Tariq M Nasim

Reputation: 1278

Try to change the format as shown in http://jqueryui.com/demos/datepicker/#options.

Add the following function in your html head:

<script type="text/javascript">
function  changeFormat() {
    $("#FirstPeriodReconDate").datepicker("option", "defaultDate", +1 );
    $("#FirstPeriodReconDate").datepicker( "option", "changeMonth", true );
    $("#FirstPeriodReconDate").datepicker( "option", "numberOfMonths", 5);
}
</script>

and call it from anywhere for example: 

<input type="button" value="click" onclick="changeFormat()"/>

or if you want to call it when the page loads then: 

<body onload="changeFormat()">
...
...
</body>

Upvotes: 0

Related Questions