@narmafzam/jalali-datepicker

<!doctype 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"> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="./css/jquery-ui.min.css"/> <link rel="stylesheet" href="./css/jalali-datepicker.min.css"/> <style type="text/css"> body { font-family: iran, tahoma, sans-serif; direction: rtl; padding: 30px 0 300px; text-align: right; font-size: 14px; } .ui-widget { font-family: tahoma, sans-serif; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6"> <div id="persianDateInstance-458" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-rtl ui-datepicker-show" style="right: 725px; top: 68px;"><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">اردیبهشت ۱۳۹۷</div> </div> <div class="datepicker-grid-view"> <div class="datepicker-day-view"> <div class="month-grid-box"> <table class="ui-datepicker-calendar"> <thead> <tr> <th class=""><span title="ش">ش</span> </th><th class=""><span title="ی">ی</span> </th><th class=""><span title="د">د</span> </th><th class=""><span title="س">س</span> </th><th class=""><span title="چ">چ</span> </th><th class=""><span title="پ">پ</span> </th><th class=""><span title="ج">ج</span> </th></tr> </thead> <tbody> <tr> <td class="ui-datepicker-day" data-date="" data-unix="1524326698152"> <a class="ui-state-default" herf="#">۱ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524413098152"> <a class="ui-state-default" herf="#">۲ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524499498152"> <a class="ui-state-default" herf="#">۳ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524585898152"> <a class="ui-state-default" herf="#">۴ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524672298152"> <a class="ui-state-default" herf="#">۵ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524758698152"> <a class="ui-state-default" herf="#">۶ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1524845098152"> <a class="ui-state-default" herf="#">۷ </a></td> </tr> <tr> <td class="ui-datepicker-day" data-date="" data-unix="1524931498152"> <a class="ui-state-default" herf="#">۸ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525017898152"> <a class="ui-state-default" herf="#">۹ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525104298152"> <a class="ui-state-default" herf="#">۱۰ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525190698152"> <a class="ui-state-default" herf="#">۱۱ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525277098152"> <a class="ui-state-default" herf="#">۱۲ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525363498152"> <a class="ui-state-default" herf="#">۱۳ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525449898152"> <a class="ui-state-default" herf="#">۱۴ </a></td> </tr> <tr> <td class="ui-datepicker-day" data-date="" data-unix="1525536298152"> <a class="ui-state-default" herf="#">۱۵ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525622698152"> <a class="ui-state-default" herf="#">۱۶ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525709098152"> <a class="ui-state-default" herf="#">۱۷ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525795498152"> <a class="ui-state-default" herf="#">۱۸ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525881898152"> <a class="ui-state-default" herf="#">۱۹ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1525968298152"> <a class="ui-state-default" herf="#">۲۰ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526054698152"> <a class="ui-state-default" herf="#">۲۱ </a></td> </tr> <tr> <td class="ui-datepicker-day" data-date="" data-unix="1526141098152"> <a class="ui-state-default" herf="#">۲۲ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526227498152"> <a class="ui-state-default" herf="#">۲۳ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526313898152"> <a class="ui-state-default" herf="#">۲۴ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526400298152"> <a class="ui-state-default" herf="#">۲۵ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526486698152"> <a class="ui-state-default" herf="#">۲۶ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526573098152"> <a class="ui-state-default" herf="#">۲۷ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526659498152"> <a class="ui-state-default" herf="#">۲۸ </a></td> </tr> <tr> <td class="ui-datepicker-day" data-date="" data-unix="1526745898152"> <a class="ui-state-default" herf="#">۲۹ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526832298152"> <a class="ui-state-default" herf="#">۳۰ </a></td> <td class="ui-datepicker-day" data-date="" data-unix="1526918698152"> <a class="ui-state-default" herf="#">۳۱ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527017399000"> <a class="" herf="#">۱ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527103799000"> <a class="" herf="#">۲ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527190199000"> <a class="" herf="#">۳ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527276599000"> <a class="" herf="#">۴ </a></td> </tr> <tr> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527362999000"> <a class="" herf="#">۵ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527449399000"> <a class="" herf="#">۶ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527535799000"> <a class="" herf="#">۷ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527622199000"> <a class="" herf="#">۸ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527708599000"> <a class="" herf="#">۹ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527794999000"> <a class="" herf="#">۱۰ </a></td> <td class="ui-datepicker-other-month ui-state-disabled ui-datepicker-unselectable" data-date="" data-unix="1527881399000"> <a class="" herf="#">۱۱ </a></td> </tr> </tbody> </table> </div> </div> </div> <div class="ui-datepicker-buttonpane ui-widget-content"> <button class="ui-datepicker-today" type="button">امروز</button> <button class="ui-datepicker-change" type="button">2018</button> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <input class="datepicker form-control" id="datepicker1" type="text" value=""> </div> </div> </div> <script src="./js/jquery.js"></script> <script src="../bower_components/persian-date/dist/persian-date.min.js"></script> <script src="./js/jalali-datepicker.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.datepicker').jalalidatepicker(); }); </script> </body> </html>