CODEWITHSUNDEEP
jqueryjquery-ui
Sampath
Sampath

Reputation: 65870

Block Calender on Jquery UI Datepicker

I am using Jquery UI Datepicker like below in Asp.net MVC Application.

Question

  1. How to block or remove calender ? (I don't need it)

  2. Still I want other stuff on that Datepicker. Such as date format,default date, etc

Reason

Not Allow user to select a date from calender.But Need to maintain date format.

HTML

<td>
     @Html.EditorFor(m => m.CheckIn.DateCheckIn)
</td>

Jquery Code

 $('#CheckIn_DateCheckIn').datepicker({ dateFormat: 'm/d/yy', altFormat: 'yy-m-d',  onSelect: function () { $(this).parents('form:first').submit(); } });

UI

enter image description here

Upvotes: 2

Views: 230

Answers (3)

Sampath
Sampath

Reputation: 65870

I just Followed What @Mario said.

Now My Text box having Date Format and also cannot select a date. 

@Html.TextBoxFor(m => m.CheckIn.DateCheckIn, new { disabled = "disabled" })

Upvotes: 0

Mario S
Mario S

Reputation: 11945

One way of "disabling" the calendar part is to set showOn to "button":

$("#datepicker").datepicker({ showOn: "button" });

And then just hide the button with css:

.ui-datepicker-trigger { display: none; }​

See http://jsfiddle.net/ukHLT/

Or just set the disabled html attributes:

@Html.TextBoxFor(m => m.CheckIn.DateCheckIn, new { disabled = "disabled" })

Upvotes: 2

sami
sami

Reputation: 1362

HTML

<input type="text" id="datepicker" />

JQUERY

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>

removed the #datepicker from the jquery code.that's it.or removed above full jquery code

Used bellow code if you want to used default date and disable it from the user 

<p>Date: <input type="text" value="12/19/2012" id="datepicker" disabled></p>

FIDDLE EXAMPLE

Upvotes: 3

Related Questions