This is my code I want to add template for input field which is not proper what i want:
<?=$form->field($modelSignupSlotDates, 'SlotDate',
[
'template' => "<div class='col-md-2'><div class='form-group date'>{input}</div></div>",'options'=>['class'=>'form-group']
])->widget(DatePicker::classname(), [
'name'=>"SignupSlotDates[SlotDate]",
'options' => ['placeholder' => Yii::t($messageFile,'SignupExpirationDatePlaceholderText'), 'autocomplete' => 'off'],
'type' => DatePicker::TYPE_COMPONENT_APPEND,
'removeButton' => false,
'pluginOptions' => [
'autoclose'=>true,
'format' => 'mm-dd-yyyy',
'startDate' => date('m-d-Y'),
'endDate' => date('m-d-Y', strtotime('+60 days')),
]
])->label(false);?>
And Below is the HTML what I'm getting:
<div class="form-group field-signupslotdates-slotdate">
<div class="col-md-2">
<div class="form-group date">
<div id="signupslotdates-slotdate-kvdate" class="input-group date">
<input id="signupslotdates-slotdate" class="krajee-datepicker form-control" name="SignupSlotDates[SlotDate]" placeholder="Expiration date" autocomplete="off" data-datepicker-source="signupslotdates-slotdate-kvdate" data-datepicker-type="3" data-krajee-kvdatepicker="kvDatepicker_26ee0803" type="text">
<span class="input-group-addon kv-date-calendar" title="Select date">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
But I want Below Structure, which i'm not able to do.
<div class='col-md-2'><div class='form-group date'>
<input class="krajee-datepicker form-control" name="" placeholder="Date" type="text">
<span class='input-group-addon kv-date-calendar' title='Select date'><i class='glyphicon glyphicon-calendar'></i></span>
</div>
</div>
Related
I have a datepicker form using bootstrap, but when I click on it, it does not show the date on the popup (the popup is truncated).
Code of the script :
// Date Picker
jQuery('#datepicker').datepicker();
jQuery('#datepicker-autoclose').datepicker({
autoclose: true,
todayHighlight: true
});
and then the result of click comes out as below:
I use codeigniter and this is my controller :
function save()
{
$this->template->set_title('Pickup');
$this->breadcrumbs->push('Pickup', 'pickup');
$this->breadcrumbs->push('Create Pickup', '/pickup/list');
$this->breadcrumbs->push('Save', '/pickup/add');
// JS Init
$js_init = "";
// Include CSS & JS
$this->template->add_init($js_init);
$this->template->add_includes('css', 'assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css');
$this->template->add_includes('css', 'assets/plugins/clockpicker/css/bootstrap-clockpicker.min.css');
$this->template->add_includes('js', 'assets/plugins/moment/moment.js');
$this->template->add_includes('js', 'assets/plugins/timepicker/bootstrap-timepicker.js');
$this->template->add_includes('js', 'assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js');
$this->template->add_includes('js', 'assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js');
$this->template->add_includes('js', 'assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js');
$this->template->add_includes('js', 'assets/js/popper.min.js');
$this->template->add_includes('js', 'assets/pages/jquery.form-pickers.init.js');
$this->template->add_includes('js', 'assets/plugins/validator/validator.min.js');
if (!$this->ion_auth->logged_in())
{
redirect('auth', 'refresh');
}
// validate form input
$this->form_validation->set_rules('pickup_code', 'Pickup Code', 'required');
$this->form_validation->set_rules('pickup_date','Date', 'required');
$this->form_validation->set_rules('pickup_address', 'Address', 'required');
// serial number untuk pickup
$serial = $this->MY_Model->generate_number($this->tables,$this->pk,'10','PCK');
if ($this->form_validation->run() == TRUE)
{
$data = array(
'pickup_code' =>$this->input->post('pickup_code'),
'pickup_date' =>$this->input->post('pickup_date'),
'pickup_address' =>$this->input->post('pickup_address')
);
$new_supplier = $this->MY_Model->insert($this->tables,$data);
redirect("pickup/listing", 'refresh');
}
else
{
$this->data['pickup_code'] = array(
'name' => 'pickup_code',
'id' => 'pickup_code',
'type' => 'text',
'data-error' => 'Please enter pickup code.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_code',$serial),
'readonly' => 'readonly',
);
$this->data['pickup_date'] = array(
'name' => 'pickup_date',
'id' => 'datepicker',
'type' => 'text',
'data-error' => 'Please enter pickup date.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_date'),
);
$this->data['pickup_note'] = array(
'name' => 'pickup_note',
'id' => 'pickup_note',
'type' => 'text',
'data-error' => 'Please enter note.',
'class' => 'form-control',
'value' => $this->form_validation->set_value('pickup_note'),
);
$this->data['pickup_address'] = array(
'name' => 'pickup_address',
'id' => 'pickup_address',
'type' => 'text',
'data-error' => 'Please enter address.',
'class' => 'form-control',
'required' => 'required',
'value' => $this->form_validation->set_value('pickup_address'),
);
$this->template->load('templates/Template',$this->folder.'/add',$this->data);
}
}
and this is my view :
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<?php echo form_open("pickup/save_pickup","data-toggle='validator'");?>
<h4 class="m-t-0 header-title"><b>Pickup Save</b></h4>
<p class="text-muted m-b-30 font-13">
<?php echo lang('create_group_subheading');?>
</p>
<?php if ($this->session->flashdata('message')) {?>
<div class='alert alert-danger alert-dismissable'>
<?php echo $this->session->flashdata('message'); ?>
</div>
<?php }?>
<div class="row">
<div class="col-md-6">
<div class="p-20">
<div class="form-group">
<label for="group_name"> Pickup Code
<?php ?>
<span class="text-danger">*</span></label>
<?php echo form_input($pickup_code);?>
<p class="help-block with-errors text-danger"></p>
</div>
<div class="form-group">
<label for="description"> Date
</label>
<span class="text-danger">*</span></label>
<?php echo form_input($pickup_date);?>
<div class="help-block with-errors text-danger"></div>
</div>
<div class="form-group">
<label for="description"> Note
</label>
<?php echo form_textarea($pickup_note);?>
<div class="help-block with-errors text-danger"></div>
</div>
<div class="form-group">
<label for="description"> Address
</label>
<span class="text-danger">*</span></label>
<?php echo form_textarea($pickup_address);?>
<div class="help-block with-errors text-danger"></div>
</div>
</div>
</div>
</div>
<div class="form-group text-right m-b-0">
<button class="btn btn-primary waves-effect waves-light" type="submit">
<i class="fa fa-save m-r-5"></i> <span>Save</span>
</button>
<a href="<?php echo base_url('pickup'); ?>" class="btn btn-secondary waves-effect m-l-5">
<i class="fa fa-reply m-r-5"></i> <span>Cancel</span>
</a>
<?php echo form_close();?>
</div>
</div>
</div>
I want to add some nice bottstrap html and css to my register page, but i don't know how to embedding php into html input and show it with style. Is there any way to do this?
The code produces the next view:
Full .php file
Note: it is showing both forms(to compare results), php and html + php. form with only php works fine, the problem is to give it style.
<?php defined('BASEPATH') OR exit('No direct script access allowed');?>
<link rel="stylesheet" href="<?= base_url('assets/bootstrap2/bootstrap.min.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/bootstrap2/bootstrap.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/js2/bootstrap.js'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/js2/bootstrap.min.js'); ?>">
<div class="container">
<?php
echo isset($_SESSION['auth_message']) ? $_SESSION['auth_message'] : FALSE;
?>
<h1>Registro usuario</h1>
<?php
echo form_open();
echo form_label('Nombre:','first_name').'<br />';
echo form_error('first_name');
echo form_input('first_name',set_value('first_name')).'<br />';
echo form_label('Apellidos:','last_name').'<br />';
echo form_error('last_name');
echo form_input('last_name',set_value('last_name')).'<br />';
// echo form_label('Username:','username').'<br />';
//echo form_error('username');
//echo form_input('username',set_value('username')).'<br />';
echo form_label('Email:','email').'<br />';
echo form_error('email');
echo form_input('email',set_value('email')).'<br />';
echo form_label('Contraseña:', 'password').'<br />';
echo form_error('password');
echo form_password('password').'<br />';
echo form_label('Confirmar contraseña:', 'confirm_password').'<br />';
echo form_error('confirm_password');
echo form_password('confirm_password').'<br /><br />';
echo form_submit('register','Confirmar');
echo form_close();
?>
</div>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Registro de usuario</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Nombre</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: José Manuel..." class="form-control input-md" required=""> -->
<?php $nombre = array(
'name' => 'first_name',
'id' => 'first_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: José Manuel...',
); ?>
<?php echo form_input($nombre); ?>
<!-- <?php echo form_input('first_name',set_value('first_name')); ?> -->
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Apellidos</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: Palma..." class="form-control input-md" required=""> -->
<?php $apellidos = array(
'name' => 'last_name',
'id' => 'last_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: Palma...',
); ?>
<?php echo form_input($apellidos); ?>
<!-- <?php echo form_input('last_name',set_value('last_name')); ?> -->
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Email</label>
<div class="col-md-4">
<!-- <input value="" id="textinput" name="textinput" type="text" placeholder="Ej: herba#gmail.com..." class="form-control input-md" required=""> -->
<?php $email = array(
'name' => 'email',
'id' => 'email',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herba#gmail.com...',
); ?>
<?php echo form_input($email); ?>
<!-- <?php echo form_input('email',set_value('email'));?> -->
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="passwordinput">Contraseña</label>
<div class="col-md-4">
<!-- <input value="" id="passwordinput" name="passwordinput" type="password" placeholder="Ej: herbaricemills9..." class="form-control input-md" required=""> -->
<?php $password = array(
'name' => 'password',
'id' => 'password',
'type' => 'password',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herbaricemills9...',
); ?>
<?php echo form_input($password); ?>
<!-- <?php echo form_password('password'); ?> -->
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="passwordinput">Confirmar contraseña</label>
<div class="col-md-4">
<!-- <input value="" id="passwordinput" name="passwordinput" type="password" placeholder="Repetir contraseña..." class="form-control input-md" required=""> -->
<?php $password1 = array(
'name' => 'confirm_password',
'id' => 'confirm_password',
'type' => 'password',
'class' => 'form-control input-md',
'placeholder' => 'Repetir contraseña...',
); ?>
<?php echo form_input($password1); ?>
<!-- <?php echo form_password('confirm_password');?> -->
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<!-- <button value="" id="singlebutton" name="singlebutton" class="btn btn-primary">Confirmar</button> -->
<!-- <?php $confirm = array(
'name' => 'singlebutton',
'id' => 'singlebutton',
//'type' => 'password',
'class' => 'btn btn-primary',
); ?>
<?php echo form_input($confirm); ?> -->
<?php echo form_submit('register','Confirmar');?>
</div>
</div>
</fieldset>
</form>
for inserting this
<input value="" id="textinput" name="textinput" type="text" placeholder="Ej: herba#gmail.com..." class="form-control input-md" required="">
try to use this example:
$data = array(
'name' => 'textinput',
'id' => 'textinput',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Ej: herba#gmail.com...',
);
echo form_input($data);
you can use like below.
for example first_name field
$data = array(
'name' => 'first_name',
'id' => 'first_name',
'type' => 'text',
'class' => 'form-control input-md',
'placeholder' => 'Enter First Name',
);
echo form_input($data);
use same for other element too.
I want to create form using yii2 ActiveForm. Here is my code:
<?php
$form = \yii\widgets\ActiveForm::begin([
'options' => [
'class' => 'form-inline'
]
]);
?>
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput(['placeholder' => "Enter Your Email"])->input('email')->label(false); ?>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
<?php \yii\widgets\ActiveForm::end(); ?>
which generates this html:
<form id="w0" class="form-inline" action="/example" method="post">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<div class="form-group field-subscriber-email required">
<input type="email" id="subscriber-email" class="form-control transparent" name="Subscriber[email]"
autofocus="autofocus">
<div class="help-block"></div>
</div>
</div>
<button type="submit" class="subscr-btn btn btn-primary btn-fill">Join</button>
Everything is ok, but where is placeholder?
Put it inside input() method as second parameter - reference
<div class="form-group">
<label class="sr-only" for="example">Email</label>
<?php echo $form->field($model, 'email', [
'inputOptions' => ['autofocus' => 'autofocus', 'class' => 'form-control transparent']
])->textInput()->input('email', ['placeholder' => "Enter Your Email"])->label(false); ?>
</div>
I set the form parametres:
<? $form = ActiveForm::begin(
[
'options' => ['class' => 'form-horizontal'],
'fieldConfig' =>
[
'template' => '<div class="control-group">{input}</div>.<div class="control-group error">{error}</div>',
],
]);
?>
<div class="control-group">
<b>Регистрация</b>
</div>
<?
echo $form->field($model, 'login', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Логин')]);
echo $form->field($model, 'password', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Пароль')]);
echo $form->field($model, 'repassword', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Повторите пароль')]);
?>
As a result, it still turns a standard form with standart classes:
<form id="w0" class="form-horizontal" action="/web/index.php?r=site%2Freg" method="post">
<input type="hidden" name="_csrf" value="cjZfVVZNOElDbml4NBlhMBRbcjslfFIvFg4OJm4aFSpERDI5Zn19OA==">
<div class="control-group">
<b>Регистрация</b>
</div>
<div class="form-group field-user-login required">
<input type="text" id="user-login" class="asd" name="User[login]" placeHolder="Логин">
<div class="help-block"></div>
</div>
<div class="form-group field-user-password required">
<input type="text" id="user-password" class="asd" name="User[password]" placeHolder="Пароль">
<div class="help-block"></div>
</div>
<div class="form-group field-user-repassword required">
<input type="text" id="user-repassword" class="asd" name="User[repassword]" placeHolder="Повторите пароль">
<div class="help-block"></div>
</div>
</form>
I don't need this classes and div with "help-block" class.
do something like :
$form->field($model, 'username', [ 'inputTemplate' => '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>{input}</div>'])->label(false)->textInput(['placeholder'=>'Your Email']);
Updatedcustomize template for all :
$form = ActiveForm::begin([
'layout' => 'horizontal',
'fieldConfig' => [
'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
'horizontalCssClasses' => [
'label' => 'col-sm-4',
'offset' => 'col-sm-offset-4',
'wrapper' => 'col-sm-8',
'error' => '',
'hint' => '',
],
],
]);
references : yii2 doc and bootstrap activeform yii2 doc
I have been trying to load remote content for different bootstrap modal on same yii2 view
<?php
$label = $model->getAttributeLabel('educationId');
$addon = [
'prepend' => [
'content' => Html::icon('book')
],
'append' => [
'content' => Html::button(
Html::icon('plus'), [
'class' => 'btn btn-success',
'title' => 'Add New' . $label,
'onclick' => new JsExpression('showModal();'),
]
),
'asButton' => true
]
];
echo Html::tag('label',$model->getAttributeLabel('educationId'), ['class'=>'control-label']);
echo Select2::widget([
'model' => $model,
'attribute' => 'educationId',
'data' => ArrayHelper::map ( EducationLevel::find ()->all (), 'id', 'name' ),
'options' => ['placeholder' => 'Select Education Level ...','template' => 'label}\n{error}'],
'addon' => $addon,
'pluginOptions' => [
'maximumInputLength' => 10
],
]);
JS function
Function showModal(){
$('#addEducationModal').modal({
remote: 'modal.html',
show: true
});
}
So the user will click on the addon button of a text field and the modal will show up, and other text fields shall have same mechanism with different modal content.
However all what I get is faded background.
I was able to make it work and more than that.
The issue i had mainly because the yii cashes generated files so to resolve i deleted the generated files and made sure the content is generated fresh :)
and i havent used the JQuery load function.
see below code:
PHP View Code
$label = $model->getAttributeLabel('majorId');
$addon = [
'prepend' => [
'content' => Html::icon('book')
],
'append' => [
'content' => Html::button(Html::icon('plus'), [
'class' => 'btn btn-success',
'title' => 'Add New' . $label ,
'data-toggle' => 'modal',
'data-target' => '#addModal',
'href'=> 'addMajorModal.html',
]),
'asButton' => true
]
];
echo Html::tag('label',$model->getAttributeLabel('majorId'),['class'=>'control-label']);
echo Select2::widget([
'model' => $model,
'attribute' => 'majorId',
'data' =>ArrayHelper::map ( Major::find ()->all (), 'id', 'name' ),
'options' => ['placeholder' => 'Select Major ...','template' => 'label}\n{error}'],
'addon' => $addon,
'pluginOptions' => [
'maximumInputLength' => 10
],
]);
<div class="modal fade" id="addModal" >
<div class="modal-dialog" dir="rtl">
<div class="modal-content" dir="rtl">
<!-- Content will be loaded here from "addMajorModal.html" file -->
</div>
</div>
</div>
The Modal file content
<div class="modal-header panel-primary" dir="rtl" horizantal-aligned="">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">إضا�ة جديد</h4>
</div>
<div class="modal-body" dir="rtl">
<div id="login-boxs" class="login-popup>
<form id="newCat" method="post" class="signin" dir="rtl" action="#">
<div class="form-group">
<label for="certName" class="control-label">مسمى التخصص </label>
<input type="text" name="name" data-val="true" data-val-required="ErrMsg" data-rule-required="true" placeholder="مسمى الشهادة" class="form-control" id="certName">
</div>
<div class="form-group">
<label for="certShortDesc" class="control-label">وص� قصير </label>
<input type="text" name="shdesc" data-rule-required="true" placeholder="وص� قصير" class="form-control" id="certShortDesc" required>
</div>
</form>
</div>
</div>
<div class="modal-footer" dir="rtl">
<div class="col-lg-6" dir="rtl">
<div class="progress" >
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" id="progresBarUpload">
</div>
</div>
</div>
<div class="col-lg-6" dir="rtl">
<button type="button" class="btn btn-danger" dir="rtl" data-dismiss="modal"><i class="glyphicon glyphicon-remove"> </i>Close</button>
<button id="submitButton" type="button" dir="rtl" class="btn btn-primary" onclick="createCertificate()"><i class="glyphicon glyphicon-ok"> </i>Save changes</button>
</div>
</div>
Thats all, with this the modal will be loaded based on yii append generation of the HTML
As far as i know, this will be workable till Bootstrap 3.3 as remote content will be deprecated in version 4