m-persian-datepicker
Version:
jQuery datepicker plugin work with Iranian calendar. (Jalali)
614 lines (577 loc) • 20.3 kB
HTML
<html lang="en">
<head>
<title>Persian Datepicker</title>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<!-- Demo Bootstrap Style -->
<!-- ------------------------------------------------------------------------------------ -->
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>-->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<!-- Demo Font Embed -->
<!-- ------------------------------------------------------------------------------------ -->
<link href="../assets/css/fontiran.css" rel="stylesheet"/>
<!-- Persian Datepicker Style -->
<!-- ------------------------------------------------------------------------------------ -->
<link id="datepickerTheme" href="./css/m-persian-datepicker.css" rel="stylesheet"/>
<!-- Theme Switcher -->
<!-- ------------------------------------------------------------------------------------ -->
<script type="text/javascript">
function swapStyleSheet(sheet) {
document.getElementById('datepickerTheme').setAttribute('href', sheet);
}
</script>
<!-- Demo Style -->
<!-- ------------------------------------------------------------------------------------ -->
<style type="text/css">
*,
body {
font-family: IRANSans, tahoma;
}
body {
padding-bottom: 300px;
}
.input-group-addon {
cursor: pointer;
}
.navbar-right {
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
Persian Date Picker <span class="badge">Version 1.1.3</span>
</a>
</div>
<nav class="navbar-right">
<span>
theme:
</span>
<button class="btn btn-xs btn-primary"
onclick="swapStyleSheet('css/persian-datepicker.css')">
Default
</button>
<button class="btn btn-xs btn-primary"
onclick="swapStyleSheet('css/theme/persian-datepicker-blue.min.css')">
Blue
</button>
<button class="btn btn-xs btn-primary"
onclick="swapStyleSheet('css/theme/persian-datepicker-cheerup.min.css')">
Cheerup
</button>
<button class="btn btn-xs btn-primary"
onclick="swapStyleSheet('css/theme/persian-datepicker-dark.min.css')">
Dark
</button>
<button class="btn btn-xs btn-primary"
onclick="swapStyleSheet('css/theme/persian-datepicker-redblack.min.css')">
Redblack
</button>
</nav><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Persian Inline Sample </h3>
<span>algorithmic Leap Year, with 'en' locale</span>
</div>
<div class="panel-body">
<div class="form-group">
<input id="inlineAlt" class="form-control" disabled/>
<br/>
<div id="inline">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Persian Inline Sample</h3>
<span>astronomical Leap Year</span>
</div>
<div class="panel-body">
<div class="form-group">
<input id="inlineAlt2" class="form-control" disabled/>
<br/>
<div id="inline2" data-date="2025/3/12">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Gregorian Inline Sample</h3>
<span>Gregorian Date</span>
</div>
<div class="panel-body">
<div class="form-group">
<input id="inlineAltGregorian" class="form-control" disabled/>
<br/>
<div id="inlineGregorian" data-date="2025/3/12">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Only Timepicker with initial value</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" id="timePicker" value="11:23:23"/>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Input Sample without intial value observer true</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input id="normalAlt" class="form-control" disabled/>
</div>
<div class="form-group">
<input class="form-control" id="normal"/>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Iconic Sample</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input id="inputGroupAlt" type="text" class="form-control" placeholder="Alt Field"
disabled>
</div>
<div class="form-group">
<div class="input-group">
<span id="inputGroup" class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
<input id="inputGroupAlt2" type="text" class="form-control" placeholder="Alt Field">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Persian Inline With Custom Weekdays</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input id="custom_weekdays_inline_alt" class="form-control" disabled/>
<br/>
<div id="custom_weekdays_inline" data-date="2025/3/12">
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Persian Inline in multiselect mode</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input id="inline_multiselect_alt" class="form-control" disabled/>
<br/>
<div id="inline_multiselect" data-date='1596612600|1596526200|1596439800|1596353400'></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Persian Inline With Custom Weekdays and multiselect</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input id="custom_weekdays_inline_multiselect_alt" class="form-control" disabled/>
<br/>
<div id="custom_weekdays_inline_multiselect">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery (required dependency) -->
<!-- ------------------------------------------------------------------------------------ -->
<!--<script-->
<!--src="https://code.jquery.com/jquery-3.2.1.min.js"-->
<!--integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="-->
<!--crossorigin="anonymous"></script>-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- ------------------------------------------------------------------------------------ -->
<script src="../bower_components/persian-date/dist/persian-date.min.js"></script>
<!-- Datepicker main script -->
<!-- ------------------------------------------------------------------------------------ -->
<!--<script src="./js/persian-datepicker.js"></script>-->
<script src="./js/m-persian-datepicker.js"></script>
<!-- Init datepicker -->
<!-- ------------------------------------------------------------------------------------ -->
<script type="text/javascript">
$(document).ready(function () {
// Debug mode
// --------------------------------------------
// window.persianDatepickerDebug = true;
// Normal Sample
// --------------------------------------------
window.pd = $('#normal').persianDatepicker({
altField: '#normalAlt',
altFormat: 'LLLL',
initialValue: false,
observer: true,
format: 'YYYY/MM/DD',
timePicker: {
enabled: true
}
});
// Timepicker With initial Value
// --------------------------------------------
$('#timePicker').persianDatepicker({
onlyTimePicker: true,
timePicker: {
meridian: {
enabled: true
},
second: {
enabled: false
}
},
format: 'HH:mm:ss'
});
// Input Group Sample
// --------------------------------------------
$('#inputGroup').persianDatepicker({
altField: '#inputGroupAlt,#inputGroupAlt2',
altFormat: 'LLLL',
timePicker: {
enabled: true
}
});
// Inline Sample
// --------------------------------------------
$("#inlineGregorian").persianDatepicker({
inline: true,
calendar: {
persian: {
showHint: true
},
gregorian: {
showHint: true
}
},
calendarType__: 'gregorian',
altField: '#inlineAltGregorian',
altFormat: 'LLLL',
format: "lll",
// maxDate: new persianDate().add('days', 90).valueOf(),
// minDate: new persianDate().subtract('days', 90).valueOf(),
// checkDate: function (unix) {
// return new persianDate(unix).day() != 3;
// },
toolbox: {
calendarSwitch: {
enabled: true
}
},
timePicker: {
enabled: true,
meridian: {
enabled: false
}
},
});
// Inline Sample
// --------------------------------------------
$("#inline").persianDatepicker({
initialValueType: 'persian',
minDate: 1506550581778,
calendar: {
persian: {
enabled: true,
locale: 'en',
leapYearMode: "algorithmic" // "astronomical"
},
gregorian: {
enabled: false,
locale: 'en'
}
},
inline: true,
viewMode: 'day',
altField: '#inlineAlt',
altFormat: 'LLLL',
format: "lll",
toolbox: {
calendarSwitch: {
enabled: true,
format: 'YYYY'
}
},
navigator: {
scroll: {
enabled: true
}
},
dayPicker: {
enabled: true
},
yearPicker: {
enabled: true
},
timePicker: {
enabled: true,
meridian: {
enabled: true
},
second: {
enabled: true
}
}
});
// Inline Sample
// --------------------------------------------
$("#inline2").persianDatepicker({
calendar: {
persian: {
enabled: true,
locale: 'fa',
showHint: true,
leapYearMode: "astronomical" // "astronomical"
},
gregorian: {
enabled: false,
showHint: true,
locale: 'en'
}
},
altField: '#inlineAlt2',
altFormat: 'LLLL',
inline: true,
viewMode: 'day',
format: "lll",
navigator: {
scroll: {
enabled: true
}
},
dayPicker: {
enabled: true
},
yearPicker: {
enabled: true
},
timePicker: {
enabled: false,
meridian: {
enabled: true
}
},
});
$("#custom_weekdays_inline").persianDatepicker({
calendar: {
persian: {
enabled: true,
locale: 'fa',
showHint: true,
leapYearMode: "astronomical" // "astronomical"
}
},
altField: '#custom_weekdays_inline_alt',
altFormat: 'LLLL',
inline: true,
viewMode: 'day',
format: "lll",
customWeekdays:{
mode: 'extended',
},
theme: {
plotArea: {
backgroundColor: 'transparent',
boxShadow: 'none',
border: 'none',
},
dayCell: {
fontSize: '20px',
fontWeight: 'bold',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: '1',
fontColor: '#1c1b19',
otherMonthFontColor: '#74909b',
disableFontColor: '#ccc',
shape: 'circle', // circle, cube, rectangle
hover: {
fontColor: '#1c1b19',
borderWidth: '1',
borderStyle: 'solid',
backgroundColor: '#c8e6ff',
borderColor: '#1373eb',
fontWeight: 'bold',
},
},
monthCell: {
backgroundColor: '#c8e6ff',
},
yearCell: {
backgroundColor: '#c8e6ff',
},
weekday: {
fontColor: '#3e4f59',
fontWeight: 'normal',
fontSize: '10px',
},
},
multiSelect: false
});
$("#custom_weekdays_inline_multiselect").persianDatepicker({
calendar: {
persian: {
enabled: true,
locale: 'fa',
showHint: true,
leapYearMode: "astronomical" // "astronomical"
}
},
altField: '#custom_weekdays_inline_multiselect_alt',
altFormat: 'X',
inline: true,
viewMode: 'day',
format: "X",
customWeekdays:{
mode: 'extended',
},
theme: {
plotArea: {
backgroundColor: 'transparent',
boxShadow: 'none',
border: 'none',
},
dayCell: {
fontSize: '20px',
fontWeight: 'bold',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: '1',
fontColor: '#1c1b19',
otherMonthFontColor: '#74909b',
disableFontColor: '#ccc',
shape: 'circle', // circle, cube, rectangle
hover: {
fontColor: '#1c1b19',
borderWidth: '1',
borderStyle: 'solid',
backgroundColor: '#c8e6ff',
borderColor: '#1373eb',
fontWeight: 'bold',
},
},
monthCell: {
backgroundColor: '#c8e6ff',
},
yearCell: {
backgroundColor: '#c8e6ff',
},
weekday: {
fontColor: '#3e4f59',
fontWeight: 'normal',
fontSize: '10px',
},
},
multiSelect: true,
});
$("#inline_multiselect").persianDatepicker({
calendar: {
persian: {
enabled: true,
locale: 'fa',
showHint: true,
leapYearMode: "astronomical" // "astronomical"
}
},
altField: '#inline_multiselect_alt',
altFormat: 'X',
inline: true,
initialValue: true,
initialValueType: 'unix',
viewMode: 'day',
format: "X",
customWeekdays:{
mode: 'extended',
},
theme: {
plotArea: {
backgroundColor: 'transparent',
boxShadow: 'none',
border: 'none',
},
dayCell: {
fontSize: '20px',
fontWeight: 'bold',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: '1',
fontColor: '#1c1b19',
otherMonthFontColor: '#74909b',
disableFontColor: '#ccc',
shape: 'circle', // circle, cube, rectangle
hover: {
fontColor: '#1c1b19',
borderWidth: '1',
borderStyle: 'solid',
backgroundColor: '#c8e6ff',
borderColor: '#1373eb',
fontWeight: 'bold',
},
},
monthCell: {
backgroundColor: '#c8e6ff',
},
yearCell: {
backgroundColor: '#c8e6ff',
},
weekday: {
fontColor: '#3e4f59',
fontWeight: 'normal',
fontSize: '10px',
},
},
multiSelect: true,
});
});
</script>
</body>
</html>