@narmafzam/jalali-datepicker
Version:
just a jalali-datepicker
190 lines (183 loc) • 7.56 kB
JavaScript
const DAY_NAMES_EXTRA_SHORT = ['ی', 'د', 'س', 'چ', 'پ', 'ج', 'ش'];
const SHOW_MONTH_AFTER_YEAR = !1;
const YEAR_RANGE_GREGORIAN = '2016:2040';
const MONTH_NAMES_SHORT = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'];
const YEAR_RANGE_JALALI = '1390:1450';
const NUMBER_OF_MONTHS = 1;
const DAY_NAMES_SHORT = ['یک', 'دو', 'سه', 'چهار', 'پنج', 'جمعه', 'شنبه'];
const GREGORIAN_EPOCH = 1721425.5;
const SECOND_MESSAGE = '';
const ISLAMIC_EPOCH = 1948439.5;
const PERSIAN_EPOCH = 1948320.5;
const FIRST_MESSAGE = '';
const CURRENT_TEXT = 'امروز';
const CHANGE_MONTH = false;
const CHANGE_YEAR = false;
const WEEK_HEADER = 'هف';
const YEAR_SUFFIX = '';
const MONTH_NAMES = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'];
const DATE_FORMAT = 'dd/mm/yy';
const CLOSE_TEXT = 'بستن';
const PREV_TEXT = 'قبلی';
const DAY_NAMES = ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'];
const NEXT_TEXT = 'بعدی';
const FIRST_DAY = 6;
const IS_JALALI = true;
const IS_SINGLE = true;
// const MIN_DATE = '+0D';
// const MAX_DATE = '+365D';
const IS_HOTEL = false;
const IS_RTL = true;
const SUBMIT_TEXT = 'نایید';
const TEMPLATE = `
{{#navigator.enabled}}
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="btn ui-datepicker-prev" title=""><span class="ui-icon ui-icon-circle-triangle-e"></span></a>
<a class="btn ui-datepicker-next" title=""><span class="ui-icon ui-icon-circle-triangle-w"></span></a>
<div class="btn ui-datepicker-title">{{navigator.switch.text}}</div>
</div>
{{/navigator.enabled}}
<div class="datepicker-grid-view" >
{{#days.enabled}}
{{#days.viewMode}}
<div class="datepicker-day-view" >
<div class="month-grid-box">
<table class="ui-datepicker-calendar">
<thead>
<tr>
{{#weekdays.list}}
<th class="{{}}"><span title="{{.}}">{{.}}</span></div>
{{/weekdays.list}}
</tr>
</thead>
<tbody>
{{#days.list}}
<tr>
{{#.}}
{{#enabled}}
<td class="{{#otherMonth}}ui-datepicker-other-month{{/otherMonth}} {{^otherMonth}}ui-datepicker-day{{/otherMonth}} {{#otherMonthDisabled}}ui-state-disabled{{/otherMonthDisabled}} {{#otherMonthUnselectable}}ui-datepicker-unselectable{{/otherMonthUnselectable}}" data-date="{{dateDate}}" data-unix="{{dataUnix}}">
<a class="{{^otherMonth}}ui-state-default{{/otherMonth}}" herf="#">{{title}}</span>
{{#altCalendarShowHint}}
<i class="alter-calendar-day">{{alterCalTitle}}</i>
{{/altCalendarShowHint}}
</td>
{{/enabled}}
{{^enabled}}
<td class="{{#otherMonth}}ui-datepicker-other-month{{/otherMonth}} {{^otherMonth}}ui-datepicker-day{{/otherMonth}} {{#otherMonthDisabled}}ui-state-disabled{{/otherMonthDisabled}} {{#otherMonthUnselectable}}ui-datepicker-unselectable{{/otherMonthUnselectable}}" data-date="{{dateDate}}" data-unix="{{dataUnix}}">
<a class="{{^otherMonth}}ui-state-default{{/otherMonth}}" herf="#">{{title}}</span>
{{#altCalendarShowHint}}
<i class="alter-calendar-day">{{alterCalTitle}}</i>
{{/altCalendarShowHint}}
</td>
{{/enabled}}
{{/.}}
</tr>
{{/days.list}}
</tbody>
</table>
</div>
</div>
{{/days.viewMode}}
{{/days.enabled}}
{{#month.enabled}}
{{#month.viewMode}}
<div class="datepicker-month-view">
<div class="container">
<div class="row no-gutters">
{{#month.list}}
{{#enabled}}
<div class="col-4">
<div data-month=" {{dataMonth}}" class="ui-state-default ui-datepicker-month month-item {{#selected}}selected{{/selected}}">{{title}}</small></div>
</div>
{{/enabled}}
{{^enabled}}
<div class="col-4">
<div data-month="{{dataMonth}}" class="month-item month-item-disable {{#selected}}selected{{/selected}}">{{title}}</small></div>
</div>
{{/enabled}}
{{/month.list}}
</div>
</div>
</div>
{{/month.viewMode}}
{{/month.enabled}}
{{#year.enabled }}
{{#year.viewMode }}
<div class="datepicker-year-view" >
<div class="container">
<div class="row no-gutters">
{{#year.list}}
{{#enabled}}
<div class="col-4">
<div data-year="{{dataYear}}" class="ui-state-default ui-datepicker-year year-item {{#selected}}selected{{/selected}}">{{title}}</div>
</div>
{{/enabled}}
{{^enabled}}
<div class="col-4">
<div data-year="{{dataYear}}" class="ui-state-default ui-datepicker-year year-item year-item-disable {{#selected}}selected{{/selected}}">{{title}}</div>
</div>
{{/enabled}}
{{/year.list}}
</div>
</div>
</div>
{{/year.viewMode }}
{{/year.enabled }}
</div>
{{#toolbox}}
{{#enabled}}
<div class="ui-datepicker-buttonpane ui-widget-content">
{{#toolbox.submitButton.enabled}}
<div class="pwt-btn-submit">{{submitButtonText}}</div>
{{/toolbox.submitButton.enabled}}
{{#toolbox.todayButton.enabled}}
<button class="ui-datepicker-today" type="button">{{todayButtonText}}</button>
{{/toolbox.todayButton.enabled}}
{{#toolbox.calendarSwitch.enabled}}
<button class="ui-datepicker-change" type="button">{{calendarSwitchText}}</button>
{{/toolbox.calendarSwitch.enabled}}
</div>
{{/enabled}}
{{^enabled}}
{{#onlyTimePicker}}
<div class="toolbox">
<div class="pwt-btn-submit">{{submitButtonText}}</div>
</div>
{{/onlyTimePicker}}
{{/enabled}}
{{/toolbox}}
`;
module.exports = {
DAY_NAMES_EXTRA_SHORT,
SHOW_MONTH_AFTER_YEAR,
YEAR_RANGE_GREGORIAN,
MONTH_NAMES_SHORT,
YEAR_RANGE_JALALI,
NUMBER_OF_MONTHS,
DAY_NAMES_SHORT,
GREGORIAN_EPOCH,
SECOND_MESSAGE,
ISLAMIC_EPOCH,
PERSIAN_EPOCH,
FIRST_MESSAGE,
CURRENT_TEXT,
CHANGE_MONTH,
SUBMIT_TEXT,
CHANGE_YEAR,
WEEK_HEADER,
YEAR_SUFFIX,
MONTH_NAMES,
DATE_FORMAT,
CLOSE_TEXT,
PREV_TEXT,
DAY_NAMES,
NEXT_TEXT,
FIRST_DAY,
IS_JALALI,
IS_SINGLE,
TEMPLATE,
// MIN_DATE,
// MAX_DATE,
IS_HOTEL,
IS_RTL
};