Question

我使用以下插件来选择日期和时间。

https://eonasdan.github.io/bootstrap-datetimepicker/

在大多数情况下效果很好。但是在某些情况下，我在输入字段中显示日期为MM / DD / YYYY但是当我提交给服务器时，我需要它作为YYYY-MM-DD

实现这一目标的最佳方法是什么？我正在考虑覆盖表单的提交功能。但我有点想避免这种情况，因为我想以某种方式使用他们的事件来完成所有操作，因此我可以在一个地方包含代码，而不是为每个表单添加一堆逻辑。

Answer 1

Ashish和Chris代码可能有效，但自Bootstrap 3 Datepicker requires Moment.js以来，为什么不使用Moment.js Parse（从为datepicker选择的自定义或区域设置格式解析日期）和Moment.js Format（到转换ISO格式的日期，例如发送到ASP.NET控制器或接受DateTime格式的其他端点？？

所以代码会更短，就像这样：

  $('#datetimepicker1').on("dp.change",
    function (e) {
      var submitDateString = '';
      if (e.Date) {
        submitDateString = e.Date.format();
      }
      $("#datetime-submit").val(submitDateString);
    });

注意（请参阅下面的评论）：e.Date可能需要e.date才能正常工作。

说明：

dp.change事件（e）有一个Date属性，它是一个时刻对象，所以你甚至不需要关心你为datepicker选择的日期格式。
清除日期选择器时，e.Date为false，因此if check。
$（“＃datepicker1”）是我绑定bootstrap的输入字段日期选择器。
$（“＃datetime-submit”）是我隐藏的输入字段。

要回答OP，如果要提交的格式为“YYYY-MM-DD”，请使用：

submitDateString = e.Date.format("YYYY-MM-DD");

我刚刚发现Moment.js而且喜欢它。用它来进行日期解析和显示更容易。

Answer 2

我也面临同样的问题。我使用隐藏控件来解决这个问题。

显示输入字段显示日期，单位为MM / DD / YYYY

并在YYYY / MM / DD中提取其他一个隐藏值

和显示日期选择器的更改事件使用java脚本将MM / DD / YYYY转换为YYYY / MM / DD格式并存入隐藏值格式

Answer 3

以下是我提出的建议：

function date_time_picker_field_report($field, format)
{
    var id_of_field = $field.attr('id');
    var name_of_field = $field.attr('name');

    var id_copy_of_field = id_of_field+'_copy';
    var name_copy_of_field = name_of_field+'_copy';

    //Set $field to be a copy that is used for actual display of date info
    $field.attr('id', id_copy_of_field);
    $field.attr('name', name_copy_of_field);

    //create hidden input to track field behind the scenes (better value)
    $('<input>').attr({
        type: 'hidden',
        id: id_of_field,
        name: name_of_field
    }).insertAfter($field);


   $field.on("dp.change", function(e) 
    {   
        //If we have a space seperator it has a time; otherwise just a date (time has 2 spaces; between date + time and AM/PM (12 hour))
        var does_date_have_time = format.indexOf(' ') != -1;
        var date = e.date;

        var formated_date = null;

        if (does_date_have_time)
        {
            formated_date = date.format("YYYY-MM-DD HH:mm");
        }
        else
        {
            formated_date = date.format("YYYY-MM-DD");
        }

        $('#'+id_of_field).val(formated_date);
   });

    var defaultDate = null;

    if (id_of_field == 'start_date')
    {
        defaultDate = moment();
        defaultDate.set('hour', 0);
        defaultDate.set('minute', 0);
    }
    else if(id_of_field == 'end_date')
    {
        defaultDate = moment();
        defaultDate.set('hour', 23);
        defaultDate.set('minute', 59);
    }

   $field.datetimepicker({format: format, locale: LOCALE, defaultDate: defaultDate});   
}

Answer 4

<input type="hidden" id="fromDate"> 
<input id="fromDateDisplay" class="form-control datefilter" data-date-format="DD/MM/YYYY" readonly="readonly">

$('#fromDateDisplay').datetimepicker({
    pickTime: false
});

$('#fromDateDisplay').on("dp.change",function (e) {
    $(this).blur().change();
    var d=new Date($("#fromDateDisplay").val());  
    $("#fromDate").val(dateParserForDatePicker(d)); 
});

//this function is use for converting date into MM/DD/YYYY format display
function dateParserForDatePicker(date) {    
    return ('0'+(date.getMonth()+1)).slice( -2 )+"/"+('0'+(date.getDate())).slice(-2)+"/"+date.getFullYear();
}

引导日期时间选择器显示格式与值格式

4 个答案: