Date & Time Picker Jquery Plugin For Foundation

File Size:12.29 KB
Views Total:448
Last Update:April 5, 2018
Publish Date:December 25, 2017
Official Website:Go to website
License:MIT

A Foundation date & time  picker in jQuery plugin used to create custom date & time picker for web & mobile base . there is more option in like date picker, time picker & month picker in foundation framework with more examples.

How It Use :

1.  Use and include the files Jquery & Css Links :

<link href="css/foundation-datepicker.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="js/foundation-datepicker.js"></script>

2.  Use and include the files Date Picker :

<input type="text" class="span2" id="dp1">
<script>
$(function(){
	$('#dp1').fdatepicker({
		initialDate: '02-12-1989',
		format: 'mm-dd-yyyy',
		disableDblClickSelection: true,
		leftArrow:'<<',
		rightArrow:'>>',
		closeIcon:'X',
		closeButton: true
	});
});
</script

3. Use and include the files Time Picker :

<input type="text" class="span2" value="02-12-1989 12:05" id="dpt">
<script>
$(function(){
  $('#dpt').fdatepicker({
		format: 'mm-dd-yyyy hh:ii',
		disableDblClickSelection: true,
		language: 'vi',
		pickTime: true
	});
});
</script>

4. All Plugin Options :

$('#selector').fdatepicker({
  
  // the date format, combination of d, dd, m, mm, yy, yyyy, hh, ii.
  format: 'mm/dd/yyyy',  

  // language
  language: 'en',  

  // day of the week start. 
  // 0 for Sunday - 6 for Saturday
  weekStart: 0,

  // set the start view mode. 
  // Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0
  startView: 'month',

  // set a limit for view mode. 
  // Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0
  minView: 'month',
  maxView: 'month', 

  // enables hour and minute selection views, 
  // equivalent of minView = 0, else minView = 2   
  pickTime: false,

  // sets initial date.
  initialDate: null,

  // disables all dates before given date
  startDate: null,

  // disables all dates after given date
  endDate: null,

  // with input fields, allows to navigate the datepicker with arrows. 
  // However, it disables navigation inside the input itself, too
  keyboard<a href="http://www.jqueryshare.net/navbar/">Navigation</a>: true,

  // disables all dates matching the given days of week 
  // (0 = Sunday, 6 = Saturday)
  daysOfWeekDisabled: [],

  //  disables the specified dates
  datesDisabled: []

});

Done 🙂