zaagan
1/18/2018 - 8:29 AM

JQuery DatePicker

JQuery DatePicker


// HTML 
//  <input class="filter_field date_picker" id="txtCampaignDateFrom" type="text">
//  <input class="filter_field date_picker" id="txtCampaignDateTo" type="text">


// JAVASCRIPT
 $.datepicker.setDefaults({
     dateFormat: 'yy-mm-dd',
     minDate: 'today',
 });
 
var defaultDate = $.datepicker.formatDate('yy-mm-dd', new Date());

$('#txtCampaignDateFrom').val(defaultDate);
$('#txtCampaignDateTo').val(defaultDate);
 

 $('#txtCampaignDateFrom').datepicker({
     onSelect: function (selectedDate) {
         $('#txtCampaignDateTo').datepicker('option', 'minDate', selectedDate || '2013-09-10');
     },
 });
 $('#txtCampaignDateTo').datepicker({
     onSelect: function (selectedDate) {
         $('#txtCampaignDateFrom').datepicker('option', 'maxDate', selectedDate || '2013-10-10');
     }
  
 });
 $('.date_picker').datepicker('setDate', new Date());




// SET DEFAULT DATE 
// SOURCE: https://stackoverflow.com/a/14580827

//TODAY
$( ".selector" ).datepicker( "setDate", new Date());
// Or on the init
$( ".selector" ).datepicker({ defaultDate: new Date() });


// 15 DAYS FROM TODAY
$( ".selector" ).datepicker( "setDate", 15);
// Or on the init
$( ".selector" ).datepicker({ defaultDate: 15 });

// SOURCE: http://api.jqueryui.com/datepicker/#option-dateFormat

$( ".selector" ).datepicker({
  dateFormat: "yy-mm-dd"
});

// Getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );
 
// Setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );