CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepickercalendar
Ahmad Badpey
Ahmad Badpey

Reputation: 6612

jalali Calendar for dateTimepicker jquery ui plugin

I am using dateTimepicker plugin for datepicker widget jquery ui.

Now I want to add jalali Calendar support to it.

Of course an alternate and customized version of datepicker jquery ui is written that you can see at jalali date picker.

that works very well but when I use datetimepicker and jalali date picker ,a problem occurs.

If you know, in jalali calendar and gregorian calendar are some differences on day month length . for Example February month(2nd month in year) in Gregorian have 28 days while Ordibehesh (2nd month in jalali) have 31 days.

When attach both jalali datepicker and datetimepicker to page and call datetimepicker provided by dateTimepicker plugin, days shown are correct But when click(select) a date from (2nd month of jalali), for example Thirtieth day , 2nd day of third jalali month(named khordad) is returned, why ? because February has 28 month.

it is a jsfiddle Of that I described :

$(document).ready(function () {
			$(".datePicker").each(function () {
				$(this).datetimepicker({
					dateFormat: 'dd MM yy',
					altFieldTimeOnly: false,
					timeFormat: "HH:mm",
					altFormat: 'dd/mm/yy',
					separator: " ",
					altSeparator: " ",
					altField: $(this).next('.hiddenField'),
					stepMinute: 5
					
				});
			});

});
<link href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>



<script src="https://dl.dropboxusercontent.com/u/24987834/calendar.js"></script>

<script src="https://dl.dropboxusercontent.com/u/24987834/jquery.ui.datepicker-cc.js"></script>

<script src="https://dl.dropboxusercontent.com/u/24987834/jquery.ui.datepicker-cc-fa.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/i18n/jquery-ui-timepicker-fa.js"></script>



<input id="start_date_picker" class="datePicker form-control from" targetTo="#end_date_picker" name="start_date_picker" type="text" style="direction:rtl">

<input class="hiddenField" name="start_date" type="hidden">

I think that click event attached to datetimepicker have a problem here.

Upvotes: 2

Views: 3590

Answers (1)

Ahmad Badpey
Ahmad Badpey

Reputation: 6612

After Hours of search and Checking jquery-ui-timepicker-addon.js and Jalali datepicker jquery ui I found that just replace all new Date() to $.datepicker.CDate() (expect line 262), resolves the problem.

Upvotes: 2

Related Questions