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:
@@ -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;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
83
e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js
vendored
Normal file
83
e107_web/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.init.js
vendored
Normal 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);
|
Reference in New Issue
Block a user