Bootstrap datepicker 在弹出窗口中不显示日期
Posted
技术标签:
【中文标题】Bootstrap datepicker 在弹出窗口中不显示日期【英文标题】:Bootstrap datepicker does not show date on popup 【发布时间】:2018-12-01 11:41:03 【问题描述】:我有一个使用引导程序的日期选择器表单,但是当我点击它时,它不会在弹出窗口上显示日期(弹出窗口被截断)。
脚本代码:
// Date Picker
jQuery('#datepicker').datepicker();
jQuery('#datepicker-autoclose').datepicker(
autoclose: true,
todayHighlight: true
);
然后点击结果如下:
【问题讨论】:
创建codepen并分享正确的代码!! 请分享你的实现! 【参考方案1】:我使用 codeigniter,这是我的控制器:
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);
这是我的观点:
<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>
【讨论】:
以上是关于Bootstrap datepicker 在弹出窗口中不显示日期的主要内容,如果未能解决你的问题,请参考以下文章
UI Bootstrap Datepicker 弹出日期格式