创建回历日期选择器

Creating a hijri datepicker

本文关键字：选择器 日期 创建      更新时间：2023-09-26

我正在尝试为伊斯兰日期创建一个jquery日期选择器。但是我缺乏jquery的知识。 有关如何连接选取器并将其显示在文本字段中的任何帮助？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script type="text/javascript" src="js/jquery.calendars.js"></script>
  <script type="text/javascript" src="js/jquery.calendars.plus.js"></script>
  <script>
(function ($) {
    $.calendars.calendars.ummalqura.prototype.regionalOptions['ar'] = {
        name: 'UmmAlQura', // The calendar name
        epochs: ['BAM', 'AM'],
        monthNames: ['المحرّم', 'صفر', 'ربيع الأول', 'ربيع الثاني', 'جمادى الاول', 'جمادى الآخر', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
        monthNamesShort: ['المحرّم', 'صفر', 'ربيع الأول', 'ربيع الثاني', 'جمادى الاول', 'جمادى الآخر', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
        dayNames: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
        dayNamesMin: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
        dayNamesShort: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
        digits: $.calendars.substituteDigits(['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩']),
        dateFormat: 'yyyy/mm/dd', // See format options on BaseCalendar.formatDate
        firstDay: 6, // The first day of the week, Sat = 0, Sun = 1, ...
        isRTL: true // True if right-to-left language, false if left-to-right
    };
})(jQuery);
/*
  $(function() {
    $( "#datepicker" ).datepicker();
  });*/
  </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p> 
</body>
</html>

我必须道歉，因为我的答案可能不是最好的（我没有伊斯兰日期的经验，但为我辩护 - 我有将jQueryUI.datepicker本地化到俄罗斯日历的经验）

所以这里是：

首先，请访问此页面：http://jqueryui.com/datepicker/#localization

从"

从弹出窗口或内联日历中选择日期"字样附近的下拉列表中 - 选择"阿拉伯语"。如果它提供的开箱即用功能可以满足您的目标 - 那么也许我可以给出一些如何安装它的说明。^_^ 如果伊斯兰日期需要更多的调整和复杂的规则——那么我的答案将是没有用的。

要执行您的要求，您必须按以下顺序连接页面中的库：

  1. jQuery
  2. jQuertUI
  3. http://jqueryui.com/resources/demos/datepicker/datepicker-ar.js（您可以点击链接并观看其内容以学习和调整它）

之后，您可以使用阿拉伯语本地化。您在离开您的位置调用它

/*
  $(function() {
    $( "#datepicker" ).datepicker();
  });*/

你可以这样做：

  $(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "ar" ] );
  });

#datepicker - 是对你的

<input type="text" id="datepicker">

它的意思是"带有 id="datepicker"的 Dom 元素"

应该就是这样了。

相关文章：