Tanggal hanya dari TextBoxFor ()

272

Saya mengalami masalah saat menampilkan satu-satunya bagian tanggal dari DateTime ke dalam kotak teks menggunakan TextBoxFor <,> (ekspresi, htmlAttributes).

Model ini didasarkan pada Linq2SQL, bidang adalah DateTime pada SQL dan dalam model Entity.

Gagal:

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

Trik ini tampaknya didepresiasi, nilai string apa pun di objek htmlAttribute diabaikan.

Gagal:

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

Saya ingin menyimpan dan hanya menampilkan bagian tanggal pada tampilan detail / edit, tanpa bagian "00:00:00".

Kronos
sumber

Jawaban:

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

Kemudian:

<%=Html.EditorFor(m => m.StartDate) %>
Kevin Craft
sumber
Ya, karena sekarang ada bantuan EditorFor dan MVC2 sudah selesai, solusi Anda adalah cara untuk pergi
Kronos
66
Tetapi sekarang datepicker Jquery UI tidak dapat diterapkan pada input ini, karena mengabaikan atribut @ class = "datepicker" seperti yang ditentukan pada helper Html.EditorFor (). Jadi kotak teks ini sekarang memformat dengan benar, tetapi tidak meluncurkan datepicker ketika diklik. Jadi itu memperbaiki satu hal dan merusak yang lainnya.
Aaron
5
Bagaimana saya bisa menampilkannya sesuai dengan solusi ini, tetapi juga memilikinya meluncurkan datepicker seperti yang terjadi dengan Html.TextboxFor ()
Aaron
49
Saya menggunakan sintaks MVC4 Razor, bidang tanggal di-render @Html.EditorFor(m => m.IssueDate)dan format pada model diterapkan [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}" )]tetapi tanggal masih ditampilkan sebagai01/01/0001 12:00:00 AM
bjan
4
@ Harun Tidak ada kelebihan EditorFor yang memiliki parameter htmlAttributes. Anda mungkin meneruskannya ke parameter viewTemplate atau sesuatu, mengira Anda melewati htmlAttributes. Ini adalah kerugian Editorfor. TextBoxFor mengabaikan anotasi DisplayFormat. Solusi Alexeyss menerapkan format berbeda untuk mengatasi ini.
AaronLS
363

MVC4 telah memecahkan masalah ini dengan menambahkan TextBoxForkelebihan baru , yang mengambil parameter format string. Anda sekarang dapat melakukan ini:

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

Ada juga kelebihan yang membutuhkan atribut html, sehingga Anda dapat mengatur kelas CSS, memasang datepickers, dll:

@Html.TextBoxFor(m => m.EndDate, "{0:d MMM yyyy}", new { @class="input-large" })
Ross McNab
sumber
40
Ini adalah jawaban terbaik untuk MVC4 - ini memungkinkan saya untuk menggunakan datepicker UI jquery dan memformat pemilihan melakukan ini:@Html.TextBoxFor(m => m.SomeDate, "{0:MM/dd/yyyy}", new { @id="datepicker" })
ericb
3
Terima kasih! Tapi sepertinya bug yang TextBoxFor mengabaikan [DisplayFormat]atribut model . Senang setidaknya ada timpa di TextBoxFor (dan Anda memberi tahu saya tentang itu).
Neil Laslett
7
Saya mengaturnya seperti ini @Html.TextBoxFor(model => model.CDate, "{0:dd.MM.yyyy}")tetapi pada httpPost saya mendapatkan data seperti MM.dd.yyyy. Bagaimana cara mengatasinya?
user007
3
Saya membelikanmu bir! Masalah kecil ini membuat saya sakit kepala sampai saya menemukan jawaban ini.
JoshYates1980
3
FYI : Banyak browser dan input[type=date]spesifikasi memerlukan "{0:yyyy-MM-dd}"format.
KyleMit
259
<%= Html.TextBoxFor(model => model.EndDate, new { @class = "jquery_datepicker", @Value = Model.EndDate.ToString("dd.MM.yyyy") })%>
Alexeyss
sumber
5
Solusi EditorFor berfungsi, kecuali ketika Anda perlu mengganti atribut HTML lainnya seperti id atau kelas. Ini solusi hebat. Aneh bahwa V perlu huruf besar.
Ben Mills
1
Untuk menangani null dengan aman, Anda bisa melakukan Model.EndDate.GetValueOrDefault (). ToString ("dd.MM.yyyy"). Nilai default Datetime akan ditampilkan jika Model.EndDate adalah nol.
15
Mengenai nol, nilai default DateTime adalah 1 Januari 1901, menurut saya, akan lebih baik untuk menggunakan@Value = (Model.DateBecamePermanentResident == null ? "" : Model.DateBecamePermanentResident.Value.ToString("dd.MM.yyyy"))
Serj Sagan
1
@Spikolynn, ini tidak menghasilkan atribut 'Nilai' kedua untuk saya (MVC3 / pisau cukur).
Doug S
2
PENTING: Periksa untuk Modal "V" di "Nilai", huruf kecil tidak akan!
Tejasvi Hegde
48

Atau gunakan pembantu yang tidak diketik:

<%= Html.TextBox("StartDate", string.Format("{0:d}", Model.StartDate)) %>
andersjanmyr
sumber
22
Variasi sedikit@Html.TextBoxFor(model => model.EndDate, "{0:d}", new { type = "date" })
Dan Friedman
Itu memang menggunakan Razor daripada mesin tampilan ASPX, tetapi mereka berdua bekerja di MVC 4 dan mengubah dari satu sintaks ke yang lain adalah sepele. Saya diposting di Razor karena itulah yang saya gunakan dan diuji. Seperti yang saya katakan, ini variasi.
Dan Friedman
1
@Dan Friedman: Ini cara untuk saya! Saya dulu bekerja dengan templat editor, tapi kemudian saya juga harus membuat html saya sendiri dan juga memasukkan semua pesan validasi DAN semua atribut Bootstrap, jadi ini benar-benar cara untuk saya (asp.net mvc5)
Michel
1
Bisakah Anda membuat masalah baru dan merinci apa yang telah Anda lakukan. Tandai saya dan saya akan dengan senang hati membantu.
Dan Friedman
1
Solusi ini adalah yang terbaik ketika Anda membutuhkan globalisasi.
alansiqueira27
26

Ini berhasil untuk saya.

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

Jangan takut menggunakan HTML mentah.

<input type="text" value="<%= Html.Encode(Model.SomeDate.ToShortDateString()) %>" />
Tamas Czinege
sumber
4
Bagaimana dia mempostingnya saat itu? Karena kencan hanya hampir pasti tidak akan diuraikan kembali di server.
Robert Koritnik
10
Selama Anda memasukkan 'name = "StartDate" yang tepat, binder model akan mengambilnya.
naspinski
@DrJokepu satu-satunya hal yang pekerja untuk saya di MVC3. Itulah sebabnya saya gagal membuat TextBoxForatau EditorFormemformat nilai. Lihat pertanyaan saya: Pembantu TextBoxFor mencampur hari dan bulan dalam tanggal
horgh
10

TL; DR;

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

Melamar [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]tidak berhasil bagi saya!


Penjelasan:

Untuk menampilkan properti tanggal model Anda menggunakan Html.TextBoxFor :

masukkan deskripsi gambar di sini

Properti tanggal dari kelas model Anda:

public DateTime DOB { get; set; }

Tidak ada hal lain yang diperlukan di sisi model.


Di Razor Anda melakukannya:

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


Penjelasan:

Tanggal inputelemen jenis html dateharus diformat sehubungan dengan ISO8601 , yaitu:yyyy-MM-dd

Tanggal yang ditampilkan diformat berdasarkan pada lokal browser pengguna, tetapi nilai yang diurai selalu diformat yyyy-mm-dd.

Pengalaman saya adalah, bahwa bahasa tidak ditentukan oleh Accept-Languageheader, tetapi oleh bahasa tampilan browser atau bahasa sistem OS.

Legenda
sumber
4

Anda juga dapat menggunakan atribut HTML 5 dengan menerapkan anotasi data ini:

[DataType(DataType.Date)]

Tetapi masalahnya adalah ini memungkinkan pemilih tanggal khusus browser untuk browser HTML 5. Anda masih memerlukan pemilih tanggal sendiri untuk peramban tanpa dukungan, dan kemudian Anda harus memastikan pemilih tanggal Anda tidak muncul selain dari peramban (Modernizr dapat melakukan ini dengan mudah), atau menyembunyikan peramban itu jika ada (rumit dan saya tidak tahu bagaimana metode yang andal yang saya lihat).

Pada akhirnya saya pergi dengan Alex karena lingkungan saya saat ini tidak memiliki Modernizr, tetapi jika itu terjadi, saya akan menggunakannya untuk secara kondisional hanya menampilkan pemilih data saya jika browser belum mendukung yang sudah.

AaronLS
sumber
3

Bagi saya, saya perlu menyimpannya TextboxFor()karena menggunakan EditorFor()mengubah tipe input hingga saat ini. Yang, di Chrome, menambahkan pemilih tanggal bawaan, yang mengacaukan datepicker jQuery yang sudah saya gunakan. Jadi, untuk terus menggunakan TextboxFor()DAN hanya menampilkan tanggal, Anda dapat melakukan ini:

<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
sumber
1

Atribut DisplayFormat tidak berfungsi untuk saya dalam bentuk apa pun setelah memuat awal. Saya malah membuat 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
sumber
1

Editor Template hanya akan berfungsi untuk tujuan tampilan. Jika Anda menggunakan editor yang sama (yang masuk akal karena merupakan editor) dan Anda memberikan nilai seperti 31/01/2010 - Anda akan mendapatkan pesan kesalahan yang mengatakan bahwa formatnya tidak valid.

Guerven
sumber
1

Saya menggunakan Globalize sehingga berfungsi dengan banyak format tanggal jadi gunakan yang berikut ini:

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

Ini akan secara otomatis menyesuaikan format tanggal ke pengaturan lokal browser.

Liam
sumber
1

Perlu diingat bahwa tampilan akan tergantung pada budaya. Dan sementara dalam kebanyakan kasus semua jawaban lain benar, itu tidak berhasil untuk saya. Masalah budaya juga akan menyebabkan masalah yang berbeda dengan datepicker jQuery, jika terpasang.

Jika Anda ingin memaksa pelarian format /dengan cara berikut:

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

Jika tidak lolos untuk saya, itu menunjukkan 08-01-2010vs. diharapkan 08/01/2010.

Juga jika tidak melarikan diri datepicker jQuery akan memilih defaultDate yang berbeda, dalam contoh saya itu May 10, 2012.

CrnaStena
sumber
1

Jika Anda menggunakan pemilih tanggal Bootstrap, maka Anda bisa menambahkan atribut data_date_format seperti di bawah ini.

      @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
sumber
0

// tampilan datimetime di datePicker adalah 11/24/2011 12:00:00 AM

// Anda dapat membaginya dengan ruang dan menetapkan nilai hanya tanggal

Naskah:

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

Markup:

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

Semoga ini bisa membantu ..

coymax
sumber
7
Solusi Anda harus berhasil. Tetapi menurut pendapat saya, mungkin berbahaya untuk mengandalkan sisi klien pada tanggal string yang diformulasikan yang dikeluarkan di sisi server. Jika pengaturan regional di sisi server tidak menyertakan ruang antara tanggal dan waktu, solusi Anda yang terbuka akan gagal.
Kronos
0

Tentu Anda bisa menggunakan Html.EditorFor. Tetapi jika Anda ingin menggunakan TextBoxFor dan menggunakan format dari atribut DisplayFormat Anda dapat menggunakannya dengan cara ini:

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

atau buat ekstensi berikutnya:

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
sumber
0

Cukup tambahkan di sebelah model Anda.

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

Saat menggunakan tag helper di ASP.NET Core, format perlu ditentukan dalam format ISO. Jika tidak ditentukan, data input terikat tidak akan ditampilkan dengan benar dan akan ditampilkan sebagai mm / hh / tttt tanpa nilai.

Model:

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

Melihat:

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

Format juga dapat ditentukan dalam tampilan menggunakan atribut asp-format.

HTML yang dihasilkan akan terlihat sebagai berikut:

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

Anda dapat menggunakan kode di bawah ini untuk mencetak waktu dalam format HH: mm , Dalam kasus saya Jenis properti adalah TimeSpan Jadi nilainya datang dalam format HH: mm: tt tetapi saya harus menunjukkan dalam format di atas yaitu. HH: mm

Jadi, Anda dapat menggunakan kode ini:

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

Jika Anda bersikeras menggunakan [DisplayFormat], tetapi Anda tidak menggunakan MVC4, Anda dapat menggunakan ini:

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