引導日期時間選擇器顯示格式與值格式

我正在使用以下插件來選擇日期和時間。引導日期時間選擇器顯示格式與值格式

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

引導日期時間選擇器顯示格式與值格式

回答

相關問題