Im trying to modify the jquery datepicker with done button as clear button. but it is throwing too much recursion error...
my code is,
function datePickerToCompareTwoFields(){
var dformat = document.getElementById('dateFormat').value;
$( '#popup_container, #popup_container1' ).datepicker({
beforeShow: customRange,
changeMonth: true,
changeYear: true,
closeText: 'Clear',
dateFormat: dformat,
numberOfMonths: 2,
selectOtherMonths: true,
showButtonPanel: true,
showOtherMonths: true
});
$.datepicker._generateHTML_Old = $.datepicker._generateHTML;
$.datepicker._generateHTML = function(inst) {
res = this._generateHTML_Old(inst);
res = res.replace("_hideDatepicker()","_clearDate('#"+inst.id+"')");
return res;
}
}
Related
a bit of assistance please.
Using YADCF with JQuery UI, and trying to include the functions: changeMonth: true, changeYear: true
In the example for JQueryUI this is what they use:
$( "#yourID" ).datepicker({
changeMonth: true,
changeYear: true,
With YADCF I am not sure how to add it. This is what my code looks like now:
.yadcf([
{column_number: 0, filter_type: "range_date",
datepicker_type: 'jquery-ui',
changeMonth: true,
changeYear: true,
filter_container_id: "external_filter_container"}
I have also tried inserting "changeMonth: true, changeYear: true," into
var datepickerDefaults = {
and separately targeting the YADCF id with
$( "#YADCFID" ).datepicker({
changeMonth: true,
changeYear: true,
So far no luck, any suggestions?
UPDATE: Although the form works the sorting does not.
Current Script:
var oTable;
$(document).ready(function () {
'use strict';
$('#example').dataTable({
"columnDefs": [{ "orderable": false, "targets": 0 }],
"order": [],
dom: '<"pos1"B><"pos2"li><"pos3"f>tp',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
}).yadcf([
{column_number: 0, filter_type: "range_date",
filter_container_id: "external_filter_container",
filter_plugin_options: {
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy"
}
}
]);
SyntaxHighlighter.all();
});
and the html:
<tr>
<td>21/06/2017</td>
</tr>
<tr class="t-two">
<td>21/06/2017</td>
</tr>
The search result returns wrong months i.e. 02/02/2017 when I select range 01/06/2017 - 02/06/2017
You should use the filter_plugin_options attribute for that
Like this:
.yadcf([
{
column_number: 0,
filter_type: "range_date",
//datepicker_type: 'jquery-ui', this one is redundant because its the default value anyway
filter_container_id: "external_filter_container",
filter_plugin_options: {
changeMonth: true,
changeYear: true
}
}
])
I am trying to search on the date field and I used the below code for the search datepicker, I need the date to be displayed as dd-M-yy format but in the search it shows as ddMyy omitting the '-' in between. Can you please suggest me the
DateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
})
}, 100);
}
current appearance
Any help in this regards will be greatly appreciated.
Using date picker if the users fills out the start date field how to I make the end date field copy that same value?
$('#sdate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true ,
firstDay: 1,
onSelect : function(){
document.getElementById('edate').value = $.datepicker.formatDate('dd/mm/yy', '#sdate');
}
});
$('#edate').datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true ,
firstDay: 1
});
Change your onSelect function to:
onSelect: function () {
$('#edate').val(this.value);
}
jsFiddle example
I have 2 datepickers one for dateend and another for datestart.
I have a button in the html when you click it a dialog-form is going to appear.
then a ask data and populate the elements in the modal form. the modal form has date end and date start. but it seems the datestart is the only one populated. pls help. i really dont know what is wrong, stuck for more than 4days
<script type="text/javascript">
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
show: "drop", //explode
hide: "clip",
autoResize: true,
height: '500',
width: 'auto',
draggable: false,
modal: true,
resizable: false
});
$('input[type="button"]').click(function () {
var buttonHolder = $('input[type="button"]');
$("#dialog-form").dialog("open");
$("#timeStart").timepicker({});
$("#dateStart").datepicker({
defaultDate: "+1w",
dateFormat: "yy/mm/d",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
minDate: new Date(), // min date should be date of today or the date which he set as startdate
onClose: function () { //selectedDate should be value. i think. problem lies in the selected.
$("#dateEnd").datepicker("option", "minDate", $(this).val());
}
});
$("#dateEnd").datepicker({
defaultDate: "+1w",
dateFormat: "yy/mm/d",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
onClose: function () {
$("#dateStart").datepicker("option", "maxDate", $(this).val()); //$(this).val()
}
});
$.ajax({
type: "POST",
dataType: "json",
url: "<?php echo site_url('ajax/getEventOfModal'); ?>",
data: {
id: $(this).attr('id'),
username: "<?php echo $this->session->userdata('email'); ?>"
},
success: function (data) {
$("#event_id").attr('value', buttonHolder.attr('id'));
$("#event_name").attr('value', data['name']);
$("#event_loc").text(data['loc']);
$("#event_desc").text(data['desc']);
$("#timeStart").timepicker('setTime', data['timeStart']);
var queryDate = data['dateStart'],
dateParts = queryDate.match(/(\d+)/g)
realDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]); // months are 0-based!
$('#dateStart').datepicker('setDate', realDate);
var queryDate2 = data['dateEnd'],
dateParts2 = queryDate2.match(/(\d+)/g)
realDate2 = new Date(dateParts2[0], dateParts2[1] - 1, dateParts2[2]); // months are 0-based!
$('#dateEnd').datepicker('setDate', realDate2);
}
});
});
});
</script>
Try removing the defaultdate from the jquery datepicker.
I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: newDate
})
}
});
But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!
I just wanna the minDate of the second one will change as long as the selected date of the first one change.
You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.
http://jqueryui.com/demos/datepicker/#option-minDate
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
Full code:
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: 0
});
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
}
});
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
You can update secodn datepicker's mindate with following code :
$( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
$("#rdate").datepicker("option", "minDate", selectedDate);
},
minDate: 'today'
});
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
minDate: 'today'
});