如何在Asp.Net Core中实现无Bootstrap的波斯（Jalali）日期选择器

方案思路 #

优先采用轻量级纯JS波斯日期选择器库，完全规避Bootstrap依赖，以下是两种可落地的实现方式：

方式一：使用无依赖的纯JS波斯日期选择器库 #

1. 准备静态资源 #

下载无Bootstrap依赖的波斯日期选择器库（如persian-datepicker纯JS版），将其CSS文件放入wwwroot/css、JS文件放入wwwroot/js目录。

2. 前端实现 #

在View中添加输入框，引入资源并初始化日期选择器：

<!-- 引入样式 -->
<link rel="stylesheet" href="~/css/persian-datepicker.min.css">

<!-- 日期输入框 -->
<input type="text" id="jalaliDate" placeholder="选择波斯日期" readonly class="form-control">

<!-- 引入JS并初始化 -->
<script src="~/js/persian-datepicker.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        persianDatepicker('#jalaliDate', {
            format: 'YYYY/MM/DD',
            autoClose: true,
            showTodayButton: true,
            calendarType: 'persian'
        });
    });
</script>

方式二：基于jalaali-js自定义实现（高度灵活） #

如果需要完全自定义UI，可使用jalaali-js处理日期转换，自行编写简易选择器：

1. 引入日期转换库 #

下载jalaali-js到wwwroot/js目录，在View中引入：

<script src="~/js/jalaali.js"></script>

2. 自定义选择器示例 #

<input type="text" id="customJalaliDate" placeholder="点击选择日期" readonly>
<div id="datePickerContainer" style="display: none; border:1px solid #ddd; padding:10px; margin-top:5px;"></div>

<script>
    const input = document.getElementById('customJalaliDate');
    const container = document.getElementById('datePickerContainer');

    // 点击输入框显示选择器
    input.addEventListener('click', function() {
        container.style.display = 'block';
        renderJalaliCalendar();
    });

    // 渲染波斯日历（简化版，可根据需求完善完整逻辑）
    function renderJalaliCalendar() {
        const now = new Date();
        const jNow = jalali.toJalali(now.getFullYear(), now.getMonth() + 1, now.getDate());
        
        container.innerHTML = `
            <div>${jNow.jy}/${jNow.jm}</div>
            <div style="display:grid; grid-template-columns: repeat(7, 1fr); gap:5px;">
                <span onclick="selectDate('${jNow.jy}/${jNow.jm}/10')">10</span>
                <span onclick="selectDate('${jNow.jy}/${jNow.jm}/11')">11</span>
                <!-- 补充更多日期项 -->
            </div>
        `;
    }

    // 选择日期后填充输入框并关闭选择器
    function selectDate(dateStr) {
        input.value = dateStr;
        container.style.display = 'none';
    }
</script>

后端日期转换处理 #

ASP.NET Core后端默认使用公历，需完成波斯日期与公历的双向转换：

1. 安装NuGet包 #

使用JalaliCalendar库处理转换逻辑：

Install-Package JalaliCalendar

2. 波斯日期转公历（存储到数据库） #

using JalaliCalendar;

[HttpPost]
public IActionResult SaveDate(string jalaliDateStr)
{
    if (JalaliDate.TryParse(jalaliDateStr, out JalaliDate jalaliDate))
    {
        DateTime gregorianDate = jalaliDate.ToDateTime();
        // 将gregorianDate存入数据库
        return Ok("日期保存成功");
    }
    return BadRequest("无效的波斯日期格式");
}

3. 公历转波斯日期（返回给前端） #

public IActionResult GetDate()
{
    DateTime gregorianDate = DateTime.Now; // 从数据库读取的公历日期
    JalaliDate jalaliDate = new JalaliDate(gregorianDate);
    string jalaliDateStr = jalaliDate.ToString("yyyy/MM/dd");
    return Ok(new { JalaliDate = jalaliDateStr });
}

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