Datepicker отображается неправильно

Я пытаюсь написать веб-сайт MVC.NET, и я хочу использовать компонент datepicker из jQuery. Для того, чтобы использовать JQuery Я использую следующий код на моей странице Макет:Datepicker отображается неправильно

<head> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script> 

<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script> 

<link href="@Url.Content("~/Content/jquery.ui.all.css")" type="text/css" /> 
<link href="@Url.Content("~/Content/jquery.ui.datepicker.css")" type="text/css" /> 
</head>

На странице, где я хочу использовать datepicker я использую следующий код:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#FromDate").datepicker({ dateFormat: 'dd/mm/yy' }); 
    }); 
</script> 
... 
<div class="editor-field-search"> 
    <label for="fromDate">From date:</label> 
    <input type="text" id="FromDate" name="FromDate" value=""/> 
</div>

Но datepicker отображается в странное путь:

The way datepicker displayed

Я Googled и попытался исправить, но не найти способ, чтобы исправить мою проблему. Что я делаю не так?

источник

2012-04-04 Ivan Mushketyk

Я не мастер JQuery, но люди могли знать, что 'редактор поля search' и' fromDate' выглядит. – Bastardo

editor-field-search - это класс CSS из стандартного проекта MVC.NET. fromDate - это поле в моем классе модели, которое должно получать значение от этого ввода. –

Oki doki, я не видел тег asp.net-mvc. – Bastardo

Это чистая проблема с ссылкой на СС. У вас нет правильной ссылки на CSS. Запустите мой образец Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC и используйте инструменты F12 и сравните с кодом, чтобы выяснить, почему ваш CSS не используется. - Rick.Anderson-at-Microsoft.com: Закомментируйте мою ссылку на CSS и вы получите тот же неверный календарь. Инструменты F12 отлично подходят для выяснения этого.

источник

2012-04-04 18:02:08 RickAndMSFT

если вы копировать вставить ваш исходный код здесь я думаю, вам не хватает «>»

<label for="fromDate">From date:</label**>** 
    <input type="text" id="FromDate" name="FromDate" value=""/>

источник

2012-04-04 14:13:43 mslliviu

Извините. В моем коде было «>», я случайно удалился при публикации вопроса. –

ли работа, если вы закроете label тег?

<label for="fromDate">From date:</label> 
            ^

источник

2012-04-04 14:17:26

Я случайно удалил символ «>», когда писал вопрос. Этот символ присутствует в моем коде. –

Это было бы слишком легко.;) Так же, как тест, если вы закомментируете все остальные html на странице, кроме div, содержащего fromDate, вы все еще видите проблему? (Мне интересно, если какой-то другой стиль выше HTML-файла datepicker вызывает проблемы для вас ...) –

Я предполагаю, что вы загрузили тему из JQuery-х ThemeRoller ... может попробовать несколько вещей:

Используйте JQuery и JQuery UI версии Javascript включен в загрузку в убедитесь, что он совместим (в каталоге загрузки js). Looks , как jQuery 1.7.1, является последней версией, включенной в jQuery UI , и у вас есть jQuery 1.7.2 на вашей странице.
Попробуйте файл jQuery UI css в каталоге css \ custom-theme - он включает все необходимые css для всех компонентов jQuery. Также отметьте , чтобы убедиться, что изображения были скопированы рядом с файлом jQuery css в вашем приложении, как в каталоге настраиваемых тем.

jQuery Getting Started Guide

источник

2012-04-06 00:49:33

Datepicker отображается неправильно

ответ

Смежные вопросы