当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Creating a hijri datepicker

问题描述:

I am trying to create a jquery datepicker for islamic date. But i lack knowledge in jquery. Any help on how to connect the picker and display it in the textfield?

<!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>

网友答案:

I have to apologize as my answer perhaps not of the best quality (I don't have experience with islamic dates, but in my defense - I had experience with localization of jQueryUI.datepicker to Russian calendar)

So here it is:

First of all, please visit this page: http://jqueryui.com/datepicker/#localization

From the drop-down list near words 'Select a date from a popup or inline calendar' - chose 'Arabic'. If functionality that it provides out-of box is ok for your goal - then perhaps I could give some instructions how to install it. ^_^ If islamic dates require more tweaks and complex rules - then my answer would be useless.

To do what you asked, you MUST connect there libraries in your page in this order:

  1. jQuery
  2. jQuertUI
  3. http://jqueryui.com/resources/demos/datepicker/datepicker-ar.js (you can follow a link and watch it's contents to learn and tweak it)

after that you can use arabic localization. You invoke it in a place where you left your

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

You could do it this way:

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

#datepicker - is a reference to your

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

It means "the Dom element with id="datepicker""

That should be it.

分享给朋友:
您可能感兴趣的文章:
随机阅读: