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

我正在使用以下插件来选择日期和时间。引导日期时间选择器显示格式与值格式

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

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

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

来源

2015-07-20 Chris Muench

您是否尝试过更改事件？ – Sushil

@Sushil我没有;但我不确定这会起作用，因为该字段可以具有默认值，并且可能永远不会更改。我想我可以有一个负载事件以及更改。我很惊讶更多的人没有遇到过这种情况。 –

是的我想更多的人不使用这个或他们可能没有遇到这种情况。但我认为更改函数应该是你应该定位的地方，否则你必须按照你提到的形式提交代码。 – Sushil

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

在MM/DD/YYYY显示输入日提交的显示日期

，并采取在YYYY/MM/DD

和在显示日期选取器的变化事件提交的其他一个隐含值转换MM/DD使用Java脚本/ YYYY以YYYY/MM/DD格式并投入隐藏值格式提交

来源

2015-07-21 04:24:13

你可以分享你的转换代码吗？我的日期格式为MM/DD/YYYY和DD-MM-YYYY –

其简单的JavaScript代码。这段代码不在我身边......如果你想要我在12小时后发送完整的代码 –

我确信我可以弄明白;理想情况下，我认为使用moment.js –

这里是我想出了：

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}); 
}

来源

2015-07-21 15:29:43

<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(); 
}

来源

2015-07-23 17:49:10

阿希什和克里斯代码可以工作，但由于Bootstrap 3 Datepicker requires Moment.js，为什么不使用Moment.js Parse（解析从选择的日期选择您的自定义或本地格式的日期）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); 
    });

说明：

的dp.change事件（五）具有日期属性，这是一个瞬间的对象，所以你甚至不需要关心你为datepicker选择的日期格式。
当datepicker被清除时e.Date为false，因此if检查。
$（“＃datepicker1”）是我绑定引导程序 datepicker的输入字段。
$（“＃datetime-submit”）是我隐藏的输入字段。

要回答的OP，如果提交所需的格式是 “YYYY-MM-DD”，然后使用：

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

我刚刚发现Moment.js，喜欢它。使用它使日期解析&显示更容易。

来源

2017-02-03 11:04:53 firepol

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

回答

相关问题