WEBFORMの日付フィールドの日付形式を変更するにはどうすればよいですか?
このフィールドでポップアップカレンダーを有効にしました。カレンダーから日付を選択すると、デフォルトの形式はY-m-dで、d-m-Yに変更します。
日付フィールド編集ページで使用可能な構成が表示されません。
構成->日付と時刻->短い日付タイプの形式は「d M Y」ですが、これをd-m-Yに更新しようとしましたが、ロックされていません!
助けて!添付されたスクリーンショット:
使用したwebform-calendar.tpl.phpファイルを見つけることができました Drupal 7-Webform日付選択をカレンダーポップアップ付きのテキストフィールドに変更 。
基本的には、テキストフィールドを追加し、ドロップダウン日付フィールドを非表示にします。
日付フィールドの出力がwebform.jsで制御されていることを理解しました
から変更する必要があります
// Set up the jQuery datepicker element.
$calendar.datepicker({
dateFormat: 'yy-mm-dd',
yearRange: startYear + ':' + endYear,
firstDay: parseInt(firstDay),
minDate: startDate,
maxDate: endDate,
onSelect: function (dateText, inst) {
var date = dateText.split('-');
$webformDatepicker.find('select.year, input.year').val(+date[0]).trigger('change');
$webformDatepicker.find('select.month').val(+date[1]).trigger('change');
$webformDatepicker.find('select.day').val(+date[2]).trigger('change');
},
beforeShow: function (input, inst) {
// Get the select list values.
var year = $webformDatepicker.find('select.year, input.year').val();
var month = $webformDatepicker.find('select.month').val();
var day = $webformDatepicker.find('select.day').val();
// If empty, default to the current year/month/day in the popup.
var today = new Date();
year = year ? year : today.getFullYear();
month = month ? month : today.getMonth() + 1;
day = day ? day : today.getDate();
// Make sure that the default year fits in the available options.
year = (year < startYear || year > endYear) ? startYear : year;
// jQuery UI Datepicker will read the input field and base its date
// off of that, even though in our case the input field is a button.
$(input).val(year + '-' + month + '-' + day);
}
});
に
// Set up the jQuery datepicker element.
$calendar.datepicker({
dateFormat: 'dd-mm-yy', // changed
yearRange: startYear + ':' + endYear,
firstDay: parseInt(firstDay),
minDate: startDate,
maxDate: endDate,
onSelect: function (dateText, inst) {
var date = dateText.split('-');
$webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change'); // changed
$webformDatepicker.find('select.month').val(+date[1]).trigger('change');
$webformDatepicker.find('select.day').val(+date[0]).trigger('change'); // changed
},
beforeShow: function (input, inst) {
// Get the select list values.
var year = $webformDatepicker.find('select.year, input.year').val();
var month = $webformDatepicker.find('select.month').val();
var day = $webformDatepicker.find('select.day').val();
// If empty, default to the current year/month/day in the popup.
var today = new Date();
year = year ? year : today.getFullYear();
month = month ? month : today.getMonth() + 1;
day = day ? day : today.getDate();
// Make sure that the default year fits in the available options.
year = (year < startYear || year > endYear) ? startYear : year;
// jQuery UI Datepicker will read the input field and base its date
// off of that, even though in our case the input field is a button.
$(input).val(day + '-' + month + '-' + year); // changed
}
});
4行が変更されたため、// changed
/ sites/themes/YOURTHEME/js/webform.jsに新しいファイルを保存します
JSファイルを置き換えるには、hook_js_alterを使用できます。
/*
* Implements hook_js_alter
*/
function YOURTHEME_js_alter(&$javascript) {
if (!empty($javascript['sites/all/modules/webform/js/webform.js'])) {
$javascript['sites/all/modules/webform/js/webform.js']['data'] = drupal_get_path('theme', 'YOURTHEME') . '/js/webform.js';
}
}
参照URLの下にあるMYTHEME_webform_date($ variables)フックを使用して変更できます。このコードをtemplate.phpに記述する必要があります
https://jamesdavidson.io/blog/how-reorder-date-format-webform-date-picker