m-persian-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"> <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"/>    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>   <link href="../assets/css/fontiran.css" rel="stylesheet"/>   <link id="datepickerTheme" href="./css/persian-datepicker.css" rel="stylesheet"/>   <script type="text/javascript"> function swapStyleSheet(sheet) { document.getElementById('datepickerTheme').setAttribute('href', sheet); } </script>   <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> </div> </nav> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="row">                                                 <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 readonly="true" 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> </div> </div> </div>       <script src="../bower_components/jquery/dist/jquery.js"></script>  <script src="../assets/persian-date.min.js"></script>    <script src="./js/persian-datepicker.js"></script>   <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, initialValue: false, observer: true, toolbox: { submitButton: { enabled: true } }, timePicker: { meridian: { enabled: true }, second: { enabled: false } }, format: 'HH:mm:ss' }); // Input Group Sample // -------------------------------------------- $('#inputGroup').persianDatepicker({ altField: '#inputGroupAlt,#inputGroupAlt2', initialValue: false, observer: true, toolbox: { submitButton: { enabled: true } }, 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 } }, }); }); </script> </body> </html>