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
}
}
])
Related
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 a datepicker form included on each page of a financial accounting web site. The date picker is designed to allow users to select a range of dates for the data that they want displayed.
Unfortunately, the only way to get the calendars to appear when the text field has focus, as a user navigates from page to page, is for a hard refresh (Ctrl-R). Not the optimum.
here's the form:
<li data-data-theme='b' >
<label for="from">From</label>
<input type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>
And here's the jquery:
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
}
$(document).ready(function(){
console.log("hello world");
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
showOn: 'button',
buttonImage: 'images/datepicker_icon.png',
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
});
I have tried changing the form to include reference to a class: eg:
<li data-data-theme='b' >
<label for="from">From</label>
<input class='datepicker' type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>
and then referencing that in the jquery function thus:
$(function() {
console.log("hello world 2");
$( ".datepicker" ).datepicker({
...
onSelect: function( selectedDate ) {
$( ".datepicker" ).datepicker();
}
});
});
but all to no avail.
So, here's the question: how do I have the datepicker calendar appear when a user navigates to a new page on the web site?
would you like to open datepicker by default..when user comes to these pages. if yes you have to configure display inline property of datepicker see example Example datepicker display inline
$(function() {
$('#datepicker').datepicker({altField: '#date1'});
});
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;
}
}
First time here, and more of a web designer than programmer, so be gentle! ;o) Anyway, as the title suggests, I have a dialog window that's opened and within that, a datepicker. What I want it that, if the user opens the datepicker, and then clicks the dialog window's close button, the datepicker is also closed.
Here's what I've got at present:
<!--// Modal Windows -->
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$('#advanced_search').dialog({
autoOpen: false,
width: 600,
height: 400,
modal: true,
resizable: false,
draggable: false,
title: 'Advanced Search',
});
$('.adv_search').click(function() {
$('#advanced_search').dialog('open');
});
});
<!--// Date Picker -->
$("#advanced_search .start_date").datepicker({
dateFormat: 'dd/mm/yy',
showButtonPanel: true,
duration: 0,
constrainInput: true,
showOn: 'button',
buttonImage: '/img/icons/50.png',
buttonImageOnly: true
});
$("#advanced_search .end_date").datepicker({
dateFormat: 'dd/mm/yy',
showButtonPanel: true,
duration: 0,
constrainInput: true,
showOn: 'button',
buttonImage: '/img/icons/50.png',
buttonImageOnly: true
});
But I'm a bit flummoxed as to how to do this. Anyone got any advice? It'd be much appreciated!
Thanks
Phil
Add the close callback to your dialog like this:
$(function() {
$('#advanced_search').dialog({
autoOpen: false,
width: 600,
height: 400,
modal: true,
resizable: false,
draggable: false,
title: 'Advanced Search',
close: function() {
$("#advanced_search .start_date").datepicker('hide');
$("#advanced_search .end_date").datepicker('hide');
}
});
$('.adv_search').click(function() {
$('#advanced_search').dialog('open');
});
});
Here's an all-inclusive approach that's slightly better, simpler selectors and the date pickers aren't created until the dialog is actually opened, so if a user never goes into it, less script running:
$(function() {
$('#advanced_search').dialog({
autoOpen: false,
width: 600,
height: 400,
modal: true,
resizable: false,
draggable: false,
title: 'Advanced Search',
close: function() {
$("#advanced_search .start_date").datepicker('hide');
$("#advanced_search .end_date").datepicker('hide');
},
open: function(event, ui) {
$(".start_date, .end_date", ui).datepicker({
dateFormat: 'dd/mm/yy',
showButtonPanel: true,
duration: 0,
constrainInput: true,
showOn: 'button',
buttonImage: '/img/icons/50.png',
buttonImageOnly: true
});
}
});
$('.adv_search').click(function() {
$('#advanced_search').dialog('open');
});
});