Data tylko z TextBoxFor ()


271

Mam problem z wyświetleniem jedynej części daty DateTime w polu tekstowym za pomocą TextBoxFor <,> (wyrażenie, htmlAttributes).

Model oparty jest na Linq2SQL, pole to DateTime na SQL oraz w modelu Entity.

Nie powiodło się:

<%= Html.TextBoxFor(model => model.dtArrivalDate, String.Format("{0:dd/MM/yyyy}", Model.dtArrivalDate))%>

Ta sztuczka wydaje się być nieaktualna, każda wartość ciągu w obiekcie htmlAttribute jest ignorowana.

Nie powiodło się:

[DisplayFormat( DataFormatString = "{0:dd/MM/yyyy}" )]
public string dtArrivalDate { get; set; }

Chciałbym przechowywać i wyświetlać tylko część daty w widoku szczegółów / edycji, bez części „00:00:00”.

Odpowiedzi:


237
[DisplayName("Start Date")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime StartDate { get; set; }

Następnie:

<%=Html.EditorFor(m => m.StartDate) %>

Tak, ponieważ teraz jest pomocnik EditorFor, a MVC2 jest sfinalizowany, Twoje rozwiązanie jest na dobrej drodze
Kronos

66
Ale teraz datepicker interfejsu użytkownika Jquery nie może być zastosowany do tych danych wejściowych, ponieważ ignoruje on atrybuty my @ class = "datepicker" określone w pomocniku Html.EditorFor (). Więc to pole tekstowe jest teraz poprawnie formatowane, ale nie uruchamia selektora daty po kliknięciu. Więc to naprawiło jedną rzecz, a drugą zepsuło.
Aaron

5
Jak sprawić, by wyświetlał się zgodnie z tym rozwiązaniem, ale także niech uruchomi datepicker, tak jak to miało miejsce w przypadku Html.TextboxFor ()
Aaron

49
Korzystam ze składni MVC4 Razor, pole daty jest renderowane jako, @Html.EditorFor(m => m.IssueDate)a formatowanie w modelu jest stosowane jako, [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}" )]ale data jest nadal wyświetlana jako01/01/0001 12:00:00 AM
bjan

4
@Aaron Nie ma przeciążenia EditorFor, który ma parametr htmlAttributes. Prawdopodobnie przekazujesz go do parametru viewTemplate lub czegoś innego, myśląc, że przekazujesz htmlAttributes. Jest to wada Editorfor. TextBoxFor ignoruje adnotację DisplayFormat. Rozwiązanie Alexeyss stosuje ten format inaczej do obejścia tego.
AaronLS,

362

MVC4 rozwiązało ten problem, dodając nowe TextBoxForprzeciążenie, które przyjmuje parametr formatu ciągu. Możesz teraz po prostu to zrobić:

@Html.TextBoxFor(m => m.EndDate, "{0:d MMM yyyy}")

Istnieje również przeciążenie, które pobiera atrybuty HTML, dzięki czemu można ustawić klasę CSS, ustawić datowniki itp.

@Html.TextBoxFor(m => m.EndDate, "{0:d MMM yyyy}", new { @class="input-large" })

40
Jest to najlepsze rozwiązanie dla MVC4 - to pozwala mi użyć jQuery UI datepicker i formatuje wybór ten sposób:@Html.TextBoxFor(m => m.SomeDate, "{0:MM/dd/yyyy}", new { @id="datepicker" })
ericb

3
Dziękuję Ci! Ale wygląda na to, że błąd TextBoxFor ignoruje [DisplayFormat]atrybut modelu . Cieszę się, że w TextBoxFor jest przynajmniej przesłonięcie (i że mnie o tym powiadomiłeś).
Neil Laslett,

7
@Html.TextBoxFor(model => model.CDate, "{0:dd.MM.yyyy}")Ustawiłem tak, ale na httpPost dostaję dane takie jak MM.dd.rrrr. Jak to rozwiązać?
user007

3
Kupuję ci piwo! Ten mały problem sprawiał mi ból głowy, dopóki nie znalazłem tej odpowiedzi.
JoshYates1980

3
FYI : Wiele przeglądarek i input[type=date]specyfikacji wymaga "{0:yyyy-MM-dd}"formatu.
KyleMit,

259
<%= Html.TextBoxFor(model => model.EndDate, new { @class = "jquery_datepicker", @Value = Model.EndDate.ToString("dd.MM.yyyy") })%>

5
Rozwiązanie EditorFor działa, z wyjątkiem sytuacji, gdy konieczne jest zastąpienie innych atrybutów HTML, takich jak id lub klasa. To świetne rozwiązanie. Dziwne, że V musi być dużymi literami.
Ben Mills,

1
Aby bezpiecznie obsługiwać wartość NULL, możesz wykonać Model.EndDate.GetValueOrDefault (). ToString („dd.MM.rrrr”). Domyślna wartość Datetime zostanie wyświetlona, ​​jeśli Model.EndDate ma wartość null.

15
Jeśli chodzi o wartości zerowe, domyślną wartością DateTime jest 1 stycznia 1901 r., Moim zdaniem, lepiej byłoby użyć@Value = (Model.DateBecamePermanentResident == null ? "" : Model.DateBecamePermanentResident.Value.ToString("dd.MM.yyyy"))
Serj Sagan

1
@Spikolynn, to nie wygenerowało dla mnie drugiego atrybutu „Wartość” (szablon MVC3 / razor).
Doug S

2
WAŻNE: Sprawdź kapitał „V” w „Wartość”, mała litera nie zrobi!
Tejasvi Hegde

48

Lub użyj nietypowych pomocników:

<%= Html.TextBox("StartDate", string.Format("{0:d}", Model.StartDate)) %>

22
Niewielka odmiana@Html.TextBoxFor(model => model.EndDate, "{0:d}", new { type = "date" })
Dan Friedman

Używa Razor zamiast silnika widoku ASPX, ale oba działają w MVC 4, a zmiana jednej składni na drugą jest banalna. Napisałem w Razor, ponieważ tego właśnie używałem i testowałem. Jak powiedziałem, jest to odmiana.
Dan Friedman

1
@Dan Friedman: To była droga dla mnie! Kiedyś pracowałem z szablonem edytora, ale potem musiałem również stworzyć swój własny HTML, a także dołączyć wszystkie komunikaty sprawdzania poprawności ORAZ wszystkie atrybuty Bootstrap, więc jest to naprawdę dobra droga dla mnie (asp.net mvc5)
Michel

1
Czy możesz utworzyć nowy problem i opisać szczegółowo swoje działania? Oznacz mnie, a chętnie pomogę.
Dan Friedman

1
To rozwiązanie jest najlepsze, gdy potrzebujesz globalizacji.
alansiqueira27

26

To zadziałało dla mnie.

@Html.TextBoxFor(m => m.DateOfBirth, "{0:MM/dd/yyyy}", new { size = "12", @class = "DOB", tabindex = 121 })

12

Nie bój się używać surowego HTML.

<input type="text" value="<%= Html.Encode(Model.SomeDate.ToShortDateString()) %>" />

4
Jak miałby to wtedy opublikować? Ponieważ data prawie na pewno nie zostanie ponownie przeanalizowana na serwerze.
Robert Koritnik

10
Tak długo, jak podasz prawidłową „name =" StartDate ”, segregator modelu będzie ją odbierał.
naspinski,

@DrJokepu jedyną rzeczą, która jest dla mnie pracownikiem na MVC3. To znaczy, że mimo to nie udało mi się utworzyć TextBoxForani EditorForsformatować wartości. Zobacz moje pytanie: TextBoxFor pomocnik miesza dzień i miesiąc w datach
horgh

10

TL; DR;

@Html.TextBoxFor(m => m.DOB,"{0:yyyy-MM-dd}", new { type = "date")

Aplikacja [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]nie zadziałała dla mnie!


Wyjaśnienie:

Aby wyświetlić właściwość daty modelu, używając Html.TextBoxFor:

wprowadź opis zdjęcia tutaj

Właściwość Data klasy modelu:

public DateTime DOB { get; set; }

Po stronie modelu nic więcej nie jest potrzebne.


W Razor:

@Html.TextBoxFor(m => m.DOB,"{0:yyyy-MM-dd}", new { type = "date")


Wyjaśnienie:

Data typu inputelementu HTML datemusi być sformatowana zgodnie z ISO8601 , czyli:yyyy-MM-dd

Wyświetlana data jest formatowana na podstawie ustawień regionalnych przeglądarki użytkownika, ale analizowana wartość jest zawsze formatowana rrrr-mm-dd.

Z mojego doświadczenia wynika, że ​​język nie jest określony przez Accept-Languagenagłówek, ale przez język wyświetlania przeglądarki lub język systemu operacyjnego.


4

Możesz również użyć atrybutów HTML 5, stosując adnotację danych:

[DataType(DataType.Date)]

Problem polega jednak na tym, że umożliwia on wybieranie dat specyficzne dla przeglądarki dla przeglądarek HTML 5. Nadal potrzebujesz własnego selektora dat dla przeglądarek bez obsługi, a następnie musisz upewnić się, że selektor dat nie pojawia się oprócz przeglądarki (Modernizr może to zrobić łatwo) lub ukryć przeglądarkę, jeśli tak się dzieje (skomplikowane i ja nie wiem jak wiarygodne były moje metody).

W końcu poszedłem z Alexem, ponieważ moje obecne środowisko nie ma Modernizr, ale gdyby tak było, użyłbym tego do warunkowego pokazywania mojego selektora danych tylko, jeśli przeglądarka go nie obsługuje.


3

Dla mnie musiałem zachować, TextboxFor()ponieważ użycie EditorFor()zmienia typ danych na dotychczasowy. Który w Chrome dodaje wbudowany moduł wyboru daty, który spieprzył narzędzie wyboru jQuery, którego już używałem. Tak więc, aby nadal używać TextboxFor()AND wypisywać tylko datę, możesz to zrobić:

<tr>
    <td class="Label">@Html.LabelFor(model => model.DeliveryDate)</td>
    @{
        string deliveryDate = Model.DeliveryDate.ToShortDateString();
    }
    <td>@Html.TextBoxFor(model => model.DeliveryDate, new { @Value = deliveryDate }) *</td>
    <td style="color: red;">@Html.ValidationMessageFor(model => model.DeliveryDate)</td>
</tr>

1

Atrybut DisplayFormat nie działał dla mnie w żadnej formie po pierwszym załadowaniu. Zamiast tego utworzyłem EditorTemplate:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>
<%@ Import Namespace="System.Web.Mvc.Html" %>
<%=
    Html.TextBox("", Model.ToShortDateString(), new { @class = "date-range" }) %>

1

Edytor szablonów będzie działał wyłącznie do celów wyświetlania. Jeśli używasz tego samego edytora (co ma sens, ponieważ jest to edytor) i podałeś wartość taką jak 31/01/2010 - pojawi się komunikat o błędzie informujący, że format jest nieprawidłowy.


1

Używam Globalizacji, więc pracuję z wieloma formatami dat, więc używaj następujących:

@Html.TextBoxFor(m => m.DateOfBirth, "{0:d}")

Spowoduje to automatyczne dostosowanie formatu daty do ustawień regionalnych przeglądarki.


1

Pamiętaj, że wyświetlanie zależy od kultury. I chociaż w większości przypadków wszystkie inne odpowiedzi są poprawne, nie działało to dla mnie. Problem z kulturą spowoduje również różne problemy z próbnikiem daty jQuery, jeśli jest dołączony.

Jeśli chcesz wymusić ucieczkę formatu /w następujący sposób:

@Html.TextBoxFor(model => model.dtArrivalDate, "{0:MM\\/dd\\/yyyy}")

Jeśli nie uciekł dla mnie, pokazuje 08-01-2010vs. oczekiwany 08/01/2010.

Ponadto, jeśli nie został dodany, jpuźnik wyboru daty wybierze inną domyślną datę, w moim przypadku tak było May 10, 2012.


1

Jeśli używasz selektora daty Bootstrap, możesz po prostu dodać atrybut data_date_format, jak poniżej.

      @Html.TextBoxFor(m => m.StartDate, new { 
@id = "your-id", @class = "datepicker form-control input-datepicker", placeholder = "dd/mm/yyyy", data_date_format = "dd/mm/yyyy" 
})

0

// data i godzina wyświetlana w datePicker to 11/24/2011 12:00:00 AM

// możesz podzielić to na spację i ustawić wartość tylko na datę

Scenariusz:

    if ($("#StartDate").val() != '') {
        var arrDate = $('#StartDate').val().split(" ");
        $('#StartDate').val(arrDate[0]);
    }

Narzut:

    <div class="editor-field">
        @Html.LabelFor(model => model.StartDate, "Start Date")
        @Html.TextBoxFor(model => model.StartDate, new { @class = "date-picker-needed" })
    </div>

Ma nadzieję, że to pomoże ..


7
Twoje rozwiązanie powinno działać. Ale moim skromnym zdaniem może być niebezpieczne poleganie po stronie klienta na sformatowanej dacie ciągu wydanej po stronie serwera. Jeśli ustawienia regionalne po stronie serwera nie zawierają spacji między datą a godziną, ujawnione rozwiązanie zawiedzie.
Kronos

0

Pewnie możesz użyć Html.EditorFor. Ale jeśli chcesz użyć TextBoxFor i użyć formatu z atrybutu DisplayFormat, możesz użyć go w następujący sposób:

@Html.TextBoxFor(model => model.dtArrivalDate, ModelMetadata.FromLambdaExpression(model => model.dtArrivalDate, ViewData).EditFormatString)

lub utwórz następne rozszerzenie:

public static class HtmlExtensions
{
    public static MvcHtmlString TextBoxWithFormatFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        return htmlHelper.TextBoxFor(expression, ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData).EditFormatString, htmlAttributes);
    }
}

0

Po prostu dodaj obok swojego modelu.

[DataType(DataType.Date)]
public string dtArrivalDate { get; set; }

0

Podczas korzystania z pomocników tagów w programie ASP.NET Core format musi zostać określony w formacie ISO. Jeśli nie zostanie określony jako taki, powiązane dane wejściowe nie będą wyświetlane poprawnie i będą wyświetlane jako mm / dd / rrrr bez wartości.

Model:

[Display(Name = "Hire")]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime? HireDate { get; set; }

Widok:

<input asp-for="Entity.HireDate" class="form-control" />

Format można również określić w widoku za pomocą atrybutu formatu asp.

Wynikowy kod HTML będzie wyglądał następująco:

<input class="form-control" type="date" id="Entity_HireDate" 
    name="Entity.HireDate" value="2012-01-01">

0

Możesz użyć poniższego kodu, aby wydrukować czas w formacie GG: mm , w moim przypadku Typ właściwości to TimeSpan Więc wartość jest w formacie GG: mm: tt, ale muszę pokazać w powyższym formacie tj. GG: mm

Możesz więc użyć tego kodu:

@Html.TextBoxFor(x =>x.mTimeFrom, null, new {@Value =Model.mTimeFrom.ToString().Substring(0,5), @class = "form-control success" })

0

Jeśli nalegasz na użycie [DisplayFormat], ale nie korzystasz z MVC4, możesz użyć tego:

@Html.TextBoxFor(m => m.EndDate, new { Value = @Html.DisplayFor(m=>m.EndDate), @class="datepicker" })
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.