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 弹出日期格式

SVN检出忽略文件夹文件

如何使用 CSS 更改 Angular-UI Bootstrap Datepicker 弹出窗口的样式?

bootstrap 怎么实现在弹出框上再弹出模态框

bootstrap datepicker插件用不了

在 bootstrap-datepicker 中将日期设置为最初为空