1
0
mirror of https://github.com/e107inc/e107.git synced 2025-07-28 18:30:53 +02:00

Use JS behavior to initialize datepicker.

This commit is contained in:
lonalore
2016-06-09 11:50:45 +02:00
parent f1846dc955
commit f74e7c15e9
2 changed files with 92 additions and 93 deletions

View File

@@ -1004,8 +1004,6 @@ class e_form
} }
} }
$text = "";
$class = (isset($classes[$type])) ? $classes[$type] : "tbox e-date"; $class = (isset($classes[$type])) ? $classes[$type] : "tbox e-date";
$size = vartrue($options['size']) ? intval($options['size']) : 40; $size = vartrue($options['size']) ? intval($options['size']) : 40;
$required = vartrue($options['required']) ? "required" : ""; $required = vartrue($options['required']) ? "required" : "";
@@ -1013,114 +1011,32 @@ class e_form
$xsize = (vartrue($options['size']) && !is_numeric($options['size'])) ? $options['size'] : 'xlarge'; $xsize = (vartrue($options['size']) && !is_numeric($options['size'])) ? $options['size'] : 'xlarge';
$disabled = vartrue($options['disabled']) ? "disabled" : ""; $disabled = vartrue($options['disabled']) ? "disabled" : "";
$text = "";
if(vartrue($options['inline'])) if(vartrue($options['inline']))
{ {
$text .= "<div class='{$class}' id='inline-{$id}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' ></div> $text .= "<div class='{$class}' id='inline-{$id}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}'></div>";
<input type='hidden' name='{$name}' id='{$id}' value='{$value}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' /> $text .= "<input type='hidden' name='{$name}' id='{$id}' value='{$value}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-firstday='{$firstDay}' />";
";
} }
else else
{ {
$text .= "<input class='{$class} input-".$xsize." form-control' type='text' size='{$size}' id='e-datepicker-{$id}' value='{$value}' data-date-unix ='{$useUnix}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-language='".e_LAN."' data-date-firstday='{$firstDay}' {$required} {$disabled} />"; $text .= "<input class='{$class} input-".$xsize." form-control' type='text' size='{$size}' id='e-datepicker-{$id}' value='{$value}' data-date-unix ='{$useUnix}' data-date-format='{$dformat}' data-date-ampm='{$ampm}' data-date-language='".e_LAN."' data-date-firstday='{$firstDay}' {$required} {$disabled} />";
$ftype = (!empty($options['debug'])) ? 'text' : 'hidden'; $ftype = (!empty($options['debug'])) ? 'text' : 'hidden';
$text .= "<input type='{$ftype}' name='{$name}' id='{$id}' value='{$hiddenValue}' />"; $text .= "<input type='{$ftype}' name='{$name}' id='{$id}' value='{$hiddenValue}' />";
} }
// $text .= "ValueFormat: ".$dateFormat." Value: ".$value;
// $text .= " ({$dformat}) type:".$dateFormat." ".$value;
// Load it in the footer. // Load it in the footer.
e107::css('core', 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css', 'jquery'); // FIXME use Library Manager (e107::library()) instead?
e107::css('core', 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css', 'jquery');
e107::js('core', 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js', 'jquery', 2); e107::js('core', 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js', 'jquery', 2);
e107::js('core', 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js', 'jquery', 2);
if(e_LANGUAGE !== 'English') if(e_LANGUAGE !== 'English')
{ {
e107::js('footer-inline', e107::getDate()->buildDateLocale()); e107::js('footer-inline', e107::getDate()->buildDateLocale());
} }
e107::js('footer-inline', '
// Fix for changeDate() not being fired when value manually altered.
$("input.e-date,input.e-datetime").on("change", function(){
var useUnix = $(this).attr("data-date-unix");
if(useUnix !== "true")
{
var id = $(this).attr("id");
var newTarget = "#"+ id.replace("e-datepicker-","");
var newValue = $(this).val();
$(newTarget).val(newValue);
}
});
$("input.e-date").each(function() {
$(this).datetimepicker({
minView: "month",
maxView: "decade",
autoclose: true,
format: $(this).attr("data-date-format"),
weekStart: $(this).attr("data-date-firstday"),
language: $(this).attr("data-date-language")
}).on("changeDate", function(ev){
var useUnix = $(this).attr("data-date-unix");
var newValue = "";
var newTarget = "#"+ ev.target.id.replace("e-datepicker-","");
if(useUnix === "true")
{
newValue = parseInt(ev.date.getTime() / 1000);
}
else
{
newValue = $("#"+ ev.target.id).val();
}
$(newTarget).val(newValue);
})
});
$("input.e-datetime").each(function() {
$(this).datetimepicker({
autoclose: true,
format: $(this).attr("data-date-format"),
weekStart: $(this).attr("data-date-firstday"),
showMeridian: $(this).attr("data-date-ampm"),
language: $(this).attr("data-date-language")
}).on("changeDate", function(ev){
var useUnix = $(this).attr("data-date-unix");
var newValue = "";
var newTarget = "#"+ ev.target.id.replace("e-datepicker-","");
if(useUnix === "true")
{
newValue = parseInt(ev.date.getTime() / 1000);
}
else
{
newValue = $("#"+ ev.target.id).val();
}
$(newTarget).val(newValue);
})
});
');
return $text; return $text;
} }

View File

@@ -0,0 +1,83 @@
// If you don't insert this line into your JS, you may see the error: e107 is not defined.
var e107 = e107 || {'settings': {}, 'behaviors': {}};
(function ($) {
/**
* Behavior to initialize date-time-picker on elements.
*
* @type {{attach: e107.behaviors.bootstrapDatetimepickerInit.attach}}
*/
e107.behaviors.bootstrapDatetimepickerInit = {
attach: function (context, settings) {
$(context).find('input.e-date,input.e-datetime').once('datetimepicker-onchange-init').each(function () {
var $item = $(this);
// Fix for changeDate() not being fired when value manually altered.
$item.on("change", function () {
var $this = $(this);
var useUnix = $this.attr("data-date-unix");
if (useUnix !== "true") {
var id = $this.attr("id");
var newTarget = "#" + id.replace("e-datepicker-", "");
var newValue = $this.val();
$(newTarget).val(newValue);
}
});
});
$(context).find('input.e-date').once('datetimepicker-init').each(function () {
var $item = $(this);
$item.datetimepicker({
minView: "month",
maxView: "decade",
autoclose: true,
format: $item.attr("data-date-format"),
weekStart: $item.attr("data-date-firstday"),
language: $item.attr("data-date-language")
}).on("changeDate", function (ev) {
var useUnix = $(this).attr("data-date-unix");
var newValue = "";
var newTarget = "#" + ev.target.id.replace("e-datepicker-", "");
if (useUnix === "true") {
newValue = parseInt(ev.date.getTime() / 1000);
}
else {
newValue = $("#" + ev.target.id).val();
}
$(newTarget).val(newValue);
});
});
$(context).find('input.e-date').once('datetimepicker-init').each(function () {
var $item = $(this);
$item.datetimepicker({
autoclose: true,
format: $item.attr("data-date-format"),
weekStart: $item.attr("data-date-firstday"),
showMeridian: $item.attr("data-date-ampm"),
language: $item.attr("data-date-language")
}).on("changeDate", function (ev) {
var useUnix = $(this).attr("data-date-unix");
var newValue = "";
var newTarget = "#" + ev.target.id.replace("e-datepicker-", "");
if (useUnix === "true") {
newValue = parseInt(ev.date.getTime() / 1000);
}
else {
newValue = $("#" + ev.target.id).val();
}
$(newTarget).val(newValue);
})
});
}
};
})(jQuery);