bootstrap datepicker example php

Bootstrap Datepicker 是一个常用的日期选择器插件,可以与 Bootstrap 框架无缝集成,使用简单方便。下面是一个 Bootstrap Datepicker 的 PHP 示例代码:

  • 首先在 HTML 页面中引入必要的样式和脚本文件:
  • <!-- Bootstrap 样式文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Datepicker 样式文件 -->
    <link href="https://cdn.staticfile.org/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <!-- jQuery 库文件 -->
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap 库文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap Datepicker 库文件 -->
    <script src="https://cdn.staticfile.org/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    
  • 在 HTML 页面中添加日期选择器的输入框:
  • <div class="form-group">
        <label for="datepicker">选择日期:</label>
        <input type="text" id="datepicker" name="datepicker" class="form-control" placeholder="选择日期">
    
  • 在 JavaScript 中初始化日期选择器:
  • <script>
        $(document).ready(function() {
            // 初始化日期选择器
            $('#datepicker').datepicker({
                format: "yyyy-mm-dd",
                autoclose: true,
                todayHighlight: true,
                language: "zh-CN"
    </script>
    

    在上面的代码中,我们使用了 jQuery 库来初始化日期选择器,设置了一些常用的参数,如日期格式、自动关闭、高亮当前日期等。需要注意的是,我们还指定了语言为中文("zh-CN"),因此日期选择器的文字将会显示为中文。

    希望这个 PHP 示例代码可以帮助你使用 Bootstrap Datepicker 实现日期选择功能。

  •