Question

我正在研究domain，在其中要通过单击搜索输入框使日历可见。

我用来放置输入框的HTML代码是：

<div class="dates">
   <div class="start_date">
     <input class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
     <span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
     <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
     </div>
</div>

我使用的脚本文件是：

<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>

问题陈述：

我想知道我需要domain中的脚本文件顺序进行哪些更改才能使其正常工作。

我感觉脚本文件在我的域中放置顺序错误。

Answer 1

bootstrap-datepicker不是Bootstrap的一部分。因此，在使用它之前，您必须包括datepicker插件代码。

df1<-read.table(header=TRUE, text="code  value
SDR111X  10
DER333F  15")
df2<-data.frame(string= c('AA.SDR111X AS SDR111X', 'AB.SDR111X AS SDR111X', 'DD.YRE999C AS YRE999C' ))


library(dplyr)
library(stringr)

#find what to match (last word in the string)
df2$match<-str_extract(df2$string, "\\w+$")
#make the join using the match and code columns
df2<-left_join(df2, df1, by=c("match"="code"))
#fill in the NA with the original word in the string
df2$value[is.na(df2$value)]<-df2$match[is.na(df2$value)]

#final answer
answer<-data.frame(string=str_replace(df2$string, "\\w+$", df2$value))

$("#startdate_datepicker").datepicker();
$("#enddate_datepicker").datepicker();

如果无法使用CDN，则可以将插件的CSS和JavaScript文件放在服务器上并链接到它们。

Answer 2

我认为您忘记将jquery和bootstrap-datepicker添加到您的域中将此代码放在<head></head>

之间

jQuery ：

Google CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或

Microsoft CDN：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

还要添加此内容：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>

Answer 3

我有同样的问题。首先是datepicker和datetimepicker之间不匹配。

接下来，我在datetimepicker上遇到了一个新问题，最后发现，对于bootstrap 4.1，有一个bootstrap-datepicker的继承人： Tempus Dominus 。

URL网站：https://tempusdominus.github.io/bootstrap-4/

在“安装”部分：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>

下一步是“用法”部分：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

datepicker不是bootstrap 4.1中的函数

3 个答案: