Build a jQuery Persian Calendar Datepicker to Pick Persian Dates in Browser Using HTML5 & Javascript

 

 

 

index.html

 

 

<h1>pwt.datepicker example</h1>
<div>
  <input type="text" class="example1" />
</div>

<style>
  
  body {
	 padding: 1rem;
	 font-family: Vazir, system-ui, tahoma, sans-serif;
}
 h1 {
	 margin-bottom: 1rem;
	 color: #444;
}
 input {
	 font-family: Vazir, system-ui, tahoma, sans-serif;
	 width: 200px;
	 text-align: right;
	 padding: 2px 4px;
}
 .link {
	 margin-top: 1rem;
	 color: #88e;
	 display: block;
}
 
</style>

<a class="link" href="https://github.com/babakhani/pwt.datepicker">GitHub</a>

<link rel="stylesheet" href="https://unpkg.com/persian-datepicker@latest/dist/css/persian-datepicker.min.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://unpkg.com/persian-date@latest/dist/persian-date.js"></script>


<script src="https://unpkg.com/persian-datepicker@latest/dist/js/persian-datepicker.js"></script>


<script>
  
  $(document).ready(function() {
  // Note: persianDate unix function returns seconds
  var threeWeeksLater = new persianDate().add('days', 21).unix() * 1000;
  // Note: Date getTime returns milliseconds
  var now = new Date(1601888766075).getTime();
  
  var options = {
    inline: false,
    autoClose: true,
    minDate: now,
    maxDate: threeWeeksLater,
    onSelect: function(unix){
      console.log('datepicker select: ' + unix);
    }
  }
  $(".example1").pDatepicker(options);
});
  
</script>

 

Leave a Reply