Question

我正在使用MVC4和Entity Framework来开发Intranet Web应用程序。我有一个可以编辑的人员列表。当我访问编辑视图时，在文本框“开始日期”中，日期显示如下：7/11/2013 00:00:00。我想要做的是以yyyy / MM / dd格式显示它。我尝试了String.Format("{0:yyyy/MM/dd}", item.StartDate)，但它不起作用。我也尝试使用注释[DisplayFormat(DataFormatString = "{0:dd MMM yyyy}")]，但它既不起作用。

在我看来，我有这个：

<div class="editor-field">
        @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>

有关如何做的任何想法？

Answer 1

@Html.TextBoxFor(m => m.StartDate, 
    new { @Value = Model.StartDate.ToString("yyyy/MM/dd"), @class="datepicker" })

Answer 2

您的问题要求EditorFor()，但您提供的代码使用TextboxFor()。

在模型中，您应该：

public class MyModel
{
    [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }
}

在查看中，您只需像编写它一样使用它：

@Html.EditorFor(m => m.StartDate, new { htmlAttributes = new { @class = "datepicker" } })

它按预期工作。

通过这样做（而不是改变它在View中显示的方式），您可以在其他地方重用您的模型，而不必指定如何在View中显示日期。因此，如果由于某种原因，您必须更改显示格式，您只需要更改一次。

该解决方案也适用于MVC 5.

Answer 3

对我而言，最简单的方法是添加类型属性

@Html.EditorFor(model => model.FechaRegistro, new { htmlAttributes = new { @class = "form-control oso" ,@type = "date"  } })

Answer 4

Html.EditorFor也可以工作

var postcss = require('gulp-postcss');
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('autoprefixer');
var gulpAutoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');
var wait = require('gulp-wait');
var imagemin = require('gulp-imagemin');
var imagePngquant = require('imagemin-pngquant');
var imageRecompress = require('imagemin-jpeg-recompress');

var B_SCSS_PATH = 'node_modules/bootstrap/scss';
var B_JS_PATH = 'node_modules/bootstrap/dist/js';

var STYLE_PATH = 'public/css';
var JS_PATH = 'public/js';
var IMG_PATH = 'public/images';
var FONT_PATH = 'public/fonts';

gulp.task('styles', function(){
   console.log('Starting style task');
   return gulp.src('resources/scss/style.scss')
   .pipe(wait(500))
   .pipe(plumber(function(err){
      console.log('Styles Task Error');
      console.log(err);
      this.emit('end');
    }))
   .pipe(sourcemaps.init())
   .pipe(sass({
      outputStyle: 'compressed'
   }))
   .pipe(sourcemaps.write('.'))
   .pipe(postcss([autoprefixer()])
 //.pipe(minifycss())
   .pipe(gulp.dest(STYLE_PATH))
   .pipe(livereload());
});
gulp.task('scripts', function(){
   console.log('Starting Script task');
   return gulp.src('resources/js/**/*.js')
   .pipe(plumber(function(err){
    console.log('Styles Task Error');
    console.log(err);
    this.emit('end');
 }))
.pipe(concat('main.js'))
//.pipe(uglify())
.pipe(gulp.dest(JS_PATH))
.pipe(livereload());
});
gulp.task('BootstrapStyle', function(){
console.log('Starting Bootstrap Style task');
return gulp.src(B_SCSS_PATH + '/bootstrap.scss')
.pipe(plumber(function(err){
    console.log('Bootstrap Styles Task Error');
    console.log(err);
    this.emit('end');
 }))
.pipe(sass({
    outputStyle: 'compressed'
}))
.pipe(postcss([autoprefixer()])
.pipe(gulp.dest(STYLE_PATH))
.pipe(livereload());
});

gulp.task('BootstrapScripts', function(){
console.log('Starting Booststrap Script task');
return gulp.src(B_JS_PATH + '/bootstrap.js')
 .pipe(plumber(function(err){
    console.log('Styles Task Error');
    console.log(err);
    this.emit('end');
  }))
 .pipe(concat('bootstrap.js'))
 //.pipe(uglify())
 .pipe(gulp.dest(JS_PATH))
 .pipe(livereload());
 });
gulp.task('images',function(){
console.log('Starting Image compression task');
return gulp.src('resources/images/**/*.{png,jpg,jpeg,svg,gif}')
    .pipe(imagemin(
            [
                imagemin.gifsicle(),
                imagemin.jpegtran(),
                imagemin.optipng(),
                imagemin.svgo(),
                imagePngquant(),
                imageRecompress()
            ]
    ))
.pipe(gulp.dest(IMG_PATH))
});

gulp.task('default',
 ['styles','scripts','BootstrapStyle','BootstrapScripts','images'], 
function(){
console.log('Default task running');
});


gulp.task('watch', ['default'], function(){
console.log('Watch task running');
require('./server.js');
livereload.listen();
gulp.watch('resources/scss/**/*.scss', ['styles']).on('change', 
   livereload.changed);
gulp.watch('resources/js/**/*.js', ['scripts']).on('change', 
  livereload.changed);
gulp.watch(B_SCSS_PATH + '/**/*.scss', ['BootstrapStyle']).on('change', 
  livereload.changed);
gulp.watch(B_JS_PATH + '/**/*.js', ['BootstrapScripts']).on('change', 
  livereload.changed);
gulp.watch(IMG_PATH, ['images']).on('change', livereload.changed);
gulp.watch('public/*.html').on('change', livereload.changed);
});

Answer 5

尝试此操作..将日期值转换为textboxfor ..中的htmlAttribute，可以解决您的问题

<div class="editor-field">
    @Html.TextBoxFor(model => model.StartDate, new { htmlAttributes = new { @Value = Model.StartDate.ToString("yyyy/MM/dd"), type = "date"  }})
    @Html.ValidationMessageFor(model => model.StartDate)
</div>

在EditorFor（）中显示格式化日期

5 个答案: