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.
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
}
}
])
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 binded by jqgrid with json returned from ajax. json has date in following format
11/1/2013 12:00:00 AM
in the colmodel i have specified the following
{ name: 'datecol', index: 'SignDate', width: '200', jsonmap: 'cell.SignDate', editable: true, sorttype: 'date',
editable: true, formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-M-d'
},
editoptions: { dataInit: initDateEdit },
initDateEdit = function(elem) {
setTimeout(function() {
$(elem).datepicker({
formatter: 'date', formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'yy-M-d'
}
autoSize: true,
showOn: 'button', // it dosn't work in searching dialog
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
//$(elem).focus();
},100);
}
This displays the date correctly in the grid as
2013-Nov-01
but when i hit addnew record, the popup comes and when i select the date and hit submit, in the grid, the new record is showing
NaN-undefined-NaN
in the date column. what is wrong here?
when I use the same code as given in this link
http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm
edit works fine, but when i add new row, the date comes as NaN-undefined-NaN
please help.
I think that the reason of the problem which you described is wrong parameters of jQuery UI Datepicker which you use. You use formatter and formatoptions parameters of datepicker which not exists. Instead of that you should use dateFormat option which format described here.
UPDATED: The main reason of the problem which you describe is wrong date format which you use. It's important to understand that srcformat and newformat of formatoptions should have PHP date format, but jQuery UI Datepicker supports another format which described here for example. The input data 11/1/2013 12:00:00 AM contains both date and time. On the other side jQuery UI Datepicker support date only. Because you use newformat: 'yy-M-d' then I suppose that you want just ignore the time part of the date. In the case I would suggest you to use
formatter: 'date',
formatoptions: {
srcformat: 'm/d/Y',
newformat: 'Y-m-d'
}
instead of
formatter: 'date',
formatoptions: {
srcformat: 'm-d-Y H:i:s',
newformat: 'Y-m-d'
}
which you use currently. Next problem is the dateFormat option of jQuery UI Datepicker. You have to use format which corresponds srcformat, but which uses correct format (described here). In case of srcformat: 'm/d/Y' you should use dateFormat: 'm/d/yy' instead of dateFormat: 'yy-m-dd' which you use in your jsfiddle demo.
The modified demo works now correctly.
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.
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;
}
}