Hijri bootstrap DatePicker in C#

Question

I am using bootstrap and I need the Islamic date date picker, I tried but it did not work. Any Help please.

    <link href="CSS/bootstrap-combined.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="CSS/bootstrap-datetimepicker.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy',
        language: 'ar-LB'
    });
    $('#datetimepicker').datepicker({ language: "ar-LB" });
</script>

 <div id="datetimepicker" class="input-append date">
    <input type="text"></input>
    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

Did you found any solution, what did you end up doing? – Imran Bughio Nov 17 '14 at 08:25 — Imran Bughio, Nov 17 '14 at 08:25

Bart van der Drift · Answer 1 · 2014-08-14T07:40:17.357

EDIT: The following solution does not provide directions to implementing the Hijri Calendar, but instead a translation of the Gregorian calendar into Arabic. This does not answer OPs question, but I leave it here since it might be useful to others.

Here is a list of all languages for the bootstrap datetimepicker. As you can see, Arabic is not there. So I grabbed the Arabic language for the jQuery datetimepicker and created the new language for bootstrap:

;(function($){
    $.fn.datetimepicker.dates['ar'] = {
        days: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
        daysShort: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
        daysMin: ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
        months: ['محرّم', 'صفر', 'ربيع الأول', 'ربيع الآخر أو ربيع الثاني', 'جمادى الاول', 'جمادى الآخر أو جمادى الثاني', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
        monthsShort: ['محرّم', 'صفر', 'ربيع الأول', 'ربيع الآخر أو ربيع الثاني', 'جمادى الاول', 'جمادى الآخر أو جمادى الثاني', 'رجب', 'شعبان', 'رمضان', 'شوّال', 'ذو القعدة', 'ذو الحجة'],
        today: ""
    };
}(jQuery));

After that, we can use the 'ar' language:

$('#datetimepicker-ar').datetimepicker({
    format: 'dd/MM/yyyy',
    language: 'ar'
});

See this JS Fiddle

PLEASE NOTE: I don't speak or read Arabic so I'm not sure if everything is correct. For some reason bootstrap seems to include the name for Sunday twice in the days arrays, so I just copied the first day in Arabic and added it as an eighth element. Please check if it's correct before usage! Also, there was no translation of 'today' in the file I used, so I left that blank. You'll have to find it for yourself.

It is not Hijri calendar it is a Gregorian calendar in arabic letters. — user3544536, Aug 14 '14 at 07:31

score 0 · Answer 2 · answered Aug 14 '14 at 07:37

0

There is no support for the Hijri calendar in bootstrap. You will have to revert to the standard jQuery datetimepicker or another library.

See here for different jQuery Calendars

answered Aug 14 '14 at 07:37

Bart van der Drift

1,287
12
30

The link I provided is a good starting point. If you run into any problems implementing the jQuery datetimepicker you can start a new question. – Bart van der Drift Aug 14 '14 at 07:57

Hijri bootstrap DatePicker in C#

2 Answers2