PHP引入Datepicker资源失效求助：单页正常，引入则异常

我完全懂你的困扰——把所有资源硬塞在index.php里虽然能跑，但代码乱糟糟的，用include管理header才是合理的工程化做法。咱们一步步来搞定这个问题：

问题根源分析 #

你遇到的情况大概率是资源加载顺序错误或者初始化代码执行时机不对：

• 可能你的Calendar初始化代码在jQuery/Semantic UI之前就执行了，导致找不到$或者.calendar()方法
• 也可能header里的资源输出写法有误（比如把HTML标签错误地放在PHP代码块里）

正确的实现步骤 #

1. 修复header.php的语法错误 #

你现在的header代码把HTML标签放在<?php ?>里是完全错误的——PHP标签里只能放PHP代码，HTML内容直接写就行。正确的inc/header.php应该是这样：

<!-- 先加载CSS资源，顺序不影响，但习惯上先样式后脚本 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />

<!-- JS资源必须按顺序加载：jQuery先，然后Semantic UI，最后自定义JS -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
<script src="js/custom.js"></script>

2. 确保Calendar初始化代码在DOM就绪后执行 #

不管你的初始化代码是放在custom.js里还是index.php的底部，都要包裹在jQuery的DOM就绪事件里——这样才能保证页面元素和所有资源都加载完成后，再执行初始化逻辑：

// 这段代码可以放在custom.js里，或者index.php的<script>标签中
$(document).ready(function() {
    $('#example1').calendar();
    $('#example2').calendar({ type: 'date' });
    $('#example3').calendar({ type: 'time' });
    $('#rangestart').calendar({ type: 'date', endCalendar: $('#rangeend') });
    $('#rangeend').calendar({ type: 'date', startCalendar: $('#rangestart') });
    $('#example4').calendar({ startMode: 'year' });
    $('#example5').calendar();
    $('#example6').calendar({ ampm: false, type: 'time' });
    $('#example7').calendar({ type: 'month' });
    $('#example8').calendar({ type: 'year' });
    $('#example9').calendar();
    $('#example10').calendar({ on: 'hover' });
    
    var today = new Date();
    $('#example11').calendar({ 
        minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5), 
        maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5) 
    });
    $('#example12').calendar({ monthFirst: false });
    $('#example13').calendar({ 
        monthFirst: false, 
        formatter: { 
            date: function (date, settings) { 
                if (!date) return ''; 
                var day = date.getDate(); 
                var month = date.getMonth() + 1; 
                var year = date.getFullYear(); 
                return day + '/' + month + '/' + year; 
            } 
        } 
    });
    $('#example14').calendar({ inline: true });
    $('#example15').calendar();
});

3. 正确组织index.php的结构 #

index.php里要先引入header，再放页面内容，最后确保初始化代码在DOM元素之后执行（如果初始化代码没放在custom.js里的话）：

<?php include 'inc/header.php';?>

<!-- 页面内容：所有Calendar元素放在这里 -->
<div class="ui calendar" id="example1">
    <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Date/Time">
    </div>
</div>
<!-- 其他Calendar元素... -->

<!-- 如果初始化代码不在custom.js里，就放在这里，确保在DOM元素之后 -->
<script>
$(document).ready(function() {
    // 初始化代码...
});
</script>

额外排查点 #

• 打开浏览器开发者工具（F12），切换到Console标签，看看有没有报错（比如$ is not defined或者$(...).calendar is not a function），这能快速定位问题
• 确认js/custom.js的路径是正确的（相对于index.php的位置）
• 检查Network标签里的资源加载状态，确保所有CSS/JS资源的HTTP状态码都是200（加载成功）

这样调整后，就能通过include的header正常加载所有资源，同时Semantic UI的Calendar组件也能正常工作了。

内容的提问来源于stack exchange，提问作者NAGENDRA