Data apenas de TextBoxFor ()

272

Estou tendo problemas para exibir a única parte da data de um DateTime em uma caixa de texto usando TextBoxFor <,> (expression, htmlAttributes).

O modelo é baseado no Linq2SQL, o campo é um DateTime no SQL e no modelo de entidade.

Falha:

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

Esse truque parece ser depreciado, qualquer valor de string no objeto htmlAttribute é ignorado.

Falha:

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

Gostaria de armazenar e exibir apenas a parte da data na exibição de detalhes / edição, sem a parte "00:00:00".

Kronos
fonte

Respostas:

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

Então:

<%=Html.EditorFor(m => m.StartDate) %>
Kevin Craft
fonte
Sim, como agora existe o EditorFor helper e o MVC2 está finalizado, sua solução é o caminho a seguir #
Kronos
66
Mas agora o datepicker da interface do usuário do Jquery não pode ser aplicado a essa entrada, porque está ignorando meus atributos @ class = "datepicker", conforme especificado para o auxiliar Html.EditorFor (). Portanto, esta caixa de texto agora formata corretamente, mas não inicia um selecionador de datas quando clicada. Então é uma coisa fixa e outra quebrada.
Aaron
5
Como posso obtê-lo para exibir de acordo com esta solução, mas também tem que lançar o datepicker como ele fez com Html.TextboxFor ()
Aaron
49
Eu estou usando a sintaxe MVC4 Navalha, o campo de data é apresentado como @Html.EditorFor(m => m.IssueDate)ea formatação do modelo é aplicado como [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}" )]mas a data ainda é mostrado como01/01/0001 12:00:00 AM
bjan
4
@ Aaron Não há sobrecarga de EditorFor que tenha um parâmetro htmlAttributes. Você provavelmente está passando para o parâmetro viewTemplate ou algo assim, pensando que estava passando htmlAttributes. Essa é a desvantagem do Editorfor. TextBoxFor ignora a anotação DisplayFormat. A solução de Alexeyss aplica o formato de maneira diferente para solucionar esse problema.
AaronLS 18/10/12
363

O MVC4 resolveu esse problema adicionando uma nova TextBoxForsobrecarga, que requer um parâmetro de formato de sequência. Agora você pode simplesmente fazer isso:

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

Há também uma sobrecarga que requer atributos html, para que você possa definir a classe CSS, conectar datapickers, etc:

@Html.TextBoxFor(m => m.EndDate, "{0:d MMM yyyy}", new { @class="input-large" })
Ross McNab
fonte
40
Esta é a melhor resposta para MVC4 - que me permite usar jquery datepicker UI e formata a seleção fazer isso:@Html.TextBoxFor(m => m.SomeDate, "{0:MM/dd/yyyy}", new { @id="datepicker" })
ericb
3
Obrigado! Mas parece um erro que o TextBoxFor ignore o [DisplayFormat]atributo do modelo . Ainda bem que há pelo menos uma substituição no TextBoxFor (e que você me alertou sobre isso).
Neil Laslett
7
Eu defini-lo assim, @Html.TextBoxFor(model => model.CDate, "{0:dd.MM.yyyy}")mas no httpPost eu recebo dados como MM.dd.aaaa. Como resolver isso?
user007
3
Estou comprando uma cerveja para você! Esse pequeno problema me causou tanta dor de cabeça até encontrar essa resposta.
JoshYates1980
3
FYI : Muitos navegadores e as input[type=date]especificações requerem "{0:yyyy-MM-dd}"formato.
precisa saber é o seguinte
259
<%= Html.TextBoxFor(model => model.EndDate, new { @class = "jquery_datepicker", @Value = Model.EndDate.ToString("dd.MM.yyyy") })%>
Alexeyss
fonte
5
A solução EditorFor funciona, exceto quando você precisa substituir outros atributos HTML, como o ID ou a classe. Esta é uma otima soluçao. Estranho que o V precise ser maiúsculo.
Ben Mills
1
Para manipular nulo com segurança, você pode fazer Model.EndDate.GetValueOrDefault (). ToString ("dd.MM.aaaa"). O valor padrão de Datetime será exibido se Model.EndDate for nulo.
15
Em relação nulos, o valor padrão de DateTime é 01 de janeiro de 1901, na minha opinião, seria melhor usar@Value = (Model.DateBecamePermanentResident == null ? "" : Model.DateBecamePermanentResident.Value.ToString("dd.MM.yyyy"))
Serj Sagan
1
@Spikolynn, isso não gerou um segundo atributo 'Valor' para mim (modelo MVC3 / razor).
Doug S
2
IMPORTANTE: verifique se há maiúsculas "V" em "Valor", letras minúsculas não serão suficientes!
tejasvi Hegde
48

Ou use os ajudantes não digitados:

<%= Html.TextBox("StartDate", string.Format("{0:d}", Model.StartDate)) %>
andersjanmyr
fonte
22
Variação leve@Html.TextBoxFor(model => model.EndDate, "{0:d}", new { type = "date" })
Dan Friedman
Ele usa o Razor em vez do mecanismo de exibição ASPX, mas ambos funcionam no MVC 4 e a mudança de uma sintaxe para outra é trivial. Eu postei no Razor porque é com isso que eu usei e testei. Como eu disse, é uma variação.
Dan Friedman
1
@ Dan Friedman: Este foi o caminho a percorrer para mim! Eu costumava trabalhar com um modelo de editor, mas também precisava criar meu próprio html e incluir todas as mensagens de validação e todos os atributos do Bootstrap, portanto, esse é realmente o caminho a seguir para mim (asp.net mvc5)
Michel
1
Você pode criar um novo problema e detalhar o que você fez. Etiquete-me e terei todo o gosto em ajudar.
Dan Friedman
1
Esta solução é a melhor quando você precisa de globalização.
alansiqueira27
26

Isso funcionou para mim.

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

Não tenha medo de usar HTML bruto.

<input type="text" value="<%= Html.Encode(Model.SomeDate.ToShortDateString()) %>" />
Tamas Czinege
fonte
4
Como ele publicaria na época? Porque a data quase certamente não será analisada novamente no servidor.
Robert Koritnik 27/02/10
10
Contanto que você inclua o nome 'name = "StartDate"' adequado, o fichário do modelo irá buscá-lo.
naspinski
@DrJokepu a única coisa que trabalha para mim no MVC3. Ou seja, não consegui criar TextBoxForou EditorForformatar o valor de qualquer maneira. Veja a minha pergunta: TextBoxFor dia mixagens auxiliares e mês em datas
Horgh
10

TL; DR;

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

Aplicar [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]não funcionou para mim!


Explicação:

Para exibir uma propriedade de data do seu modelo usando Html.TextBoxFor:

insira a descrição da imagem aqui

Data da propriedade da sua classe de modelo:

public DateTime DOB { get; set; }

Nada mais é necessário no lado do modelo.


No Razor você faz:

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


Explicação:

A data de um inputelemento html do tipo datedeve ser formatada em relação à ISO8601 , que é:yyyy-MM-dd

A data exibida é formatada com base na localidade do navegador do usuário, mas o valor analisado é sempre formatado aaaa-mm-dd.

Minha experiência é que o idioma não é determinado pelo Accept-Languagecabeçalho, mas pelo idioma de exibição do navegador ou pelo sistema do sistema operacional.

Legendas
fonte
4

Você também pode usar os atributos do HTML 5 aplicando esta anotação de dados:

[DataType(DataType.Date)]

Mas o problema é que isso permite um seletor de datas específico do navegador para navegadores HTML 5. Você ainda precisa do seu seletor de datas para navegadores sem suporte e, em seguida, verifique se o seletor de datas não aparece além do navegador (o Modernizr pode fazer isso facilmente) ou oculte o navegador, se aparecer (complicado e eu não sei como os métodos confiáveis ​​que vi foram).

No final, eu fui com o Alex porque meu ambiente atual não possui o Modernizr, mas se tivesse, eu teria usado isso para mostrar condicionalmente apenas o meu seletor de dados se o navegador já não tivesse suporte.

AaronLS
fonte
3

Para mim, eu precisava manter o TextboxFor()porque usar EditorFor()alterações o tipo de entrada até a data. O qual, no Chrome, adiciona um seletor de datas integrado, que danificou o seletor de datas do jQuery que eu já estava usando. Portanto, para continuar usando TextboxFor()AND apenas com a data, você pode fazer isso:

<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>
ScubaSteve
fonte
1

O atributo DisplayFormat não funcionou para mim em nenhum dos formulários no carregamento inicial. Criei um 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" }) %>
triskelion
fonte
1

O Editor de modelos funcionará apenas para fins de exibição. Se você usar o mesmo editor (o que faz sentido porque é um editor) e fornecer um valor como 31/01/2010 - você receberá uma mensagem de erro informando que o formato é inválido.

Guerven
fonte
1

Eu uso Globalizar para trabalhar com muitos formatos de data, então use o seguinte:

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

Isso ajustará automaticamente o formato da data às configurações de localidade do navegador.

Liam
fonte
1

Lembre-se de que a exibição dependerá da cultura. E embora na maioria dos casos todas as outras respostas estejam corretas, isso não funcionou para mim. O problema de cultura também causará problemas diferentes com o datepicker do jQuery, se anexado.

Se você deseja forçar a saída do formato /da seguinte maneira:

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

Se não escapou para mim, mostra 08-01-2010vs. esperado 08/01/2010.

Além disso, se não tiver escapado, o dateQuicker do jQuery selecionará diferentes defaultDate, na minha instância foi May 10, 2012.

CrnaStena
fonte
1

Se você estiver usando o selecionador de data do Bootstrap, poderá adicionar o atributo data_date_format como abaixo.

      @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" 
})
uda
fonte
0

// data e hora são exibidos na dataPicker é 24/11/2011 12:00:00

// você pode dividir isso por espaço e definir o valor somente para data

Roteiro:

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

Marcação:

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

Espero que isso ajude ..

coymax
fonte
7
Sua solução deve funcionar. Mas, na minha humilde opinião, pode ser perigoso confiar no lado do cliente na data da string formatada emitida no lado do servidor. Se as configurações regionais no lado do servidor não incluírem um espaço entre data e hora, sua solução exposta falhará.
Kronos
0

Claro que você pode usar o Html.EditorFor. Mas se você quiser usar TextBoxFor e usar o formato do atributo DisplayFormat, poderá usá-lo desta maneira:

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

ou crie a próxima extensão:

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);
    }
}
Yury Dzhantuganov
fonte
0

Basta adicionar ao lado do seu modelo.

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

Ao usar auxiliares de marca no ASP.NET Core, o formato precisa ser especificado no formato ISO. Se não for especificado como tal, os dados de entrada encadernados não serão exibidos corretamente e serão mostrados em mm / dd / aaaa sem valor.

Modelo:

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

Visão:

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

O formato também pode ser especificado na exibição usando o atributo asp-format.

O HTML resultante terá a seguinte aparência:

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

Você pode usar o código abaixo para imprimir o tempo no formato HH: mm . No meu caso, o tipo de propriedade é TimeSpan. Portanto, o valor está chegando no formato HH: mm: tt, mas eu tenho que mostrar no formato acima. HH: mm

Então você pode usar este código:

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

Se você insistir em usar o [DisplayFormat], mas não estiver usando o MVC4, poderá usar o seguinte:

@Html.TextBoxFor(m => m.EndDate, new { Value = @Html.DisplayFor(m=>m.EndDate), @class="datepicker" })
Aeon Suen
fonte