Below is my code for a datepicker in dialog box which works good but I want to set my default date and calender date as per the php server time not as per the local timezone.
for that I am trying to do a beforeshow but which is not firing at all.
Any suggestions from anyone???
$('#chooseDt').click(function() {
$("#Date_calendar").dialog({
open: function(event, ui) {
$( "#dpicker" ).datepicker({
autoSize: true,
showOtherMonths: true,
numberOfMonths: 3,
showCurrentAtPos: 1,
onSelect: function(input, inst) {
var currentDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
var unixdate = currentDate.getTime() / 1000;
$(this).datepicker('destroy');
$(this).parent("div#Date_calendar").dialog( "close" );
window.location.href="xxxxxx.php?homeday="+(unixdate);
},
beforeShow: function() {
alert("A");
//var theDate = new Date();
//theDate.setDate('<?php echo date("d",strtotime($c_date)); ?>');
// calenderDate is my global php variable with date used as currentdate in my php page
//$(this).datepicker('option','defaultDate',calenderDate);
}
});
},
close: function(event,ui) {
$(this).datepicker('destroy');
},
resizable: false,
modal: true,
minWidth: 760
}).height("auto");
$( "#Date_calendar" ).dialog('widget').css({'top' : '25%', 'left' : '30%','margin-top' : '-10%', 'margin-left' : '-100px'});
return false;
});
Related
I'm using flatpikr https://flatpickr.js.org/
I want on close event of an outbound (only date) picker, to set the initial date of the return picker to the same date selected in the first one.
I wrote this code which is working, but is not switching to the correct month page, it simply disables all the dates before the selected one in the outbound picker.
Here you can check what happens in the booking form.
https://anekitalia.com/en/
I have tried to use defaultDate instead of minDate in the on close function but it doesn't works.
<script>
$( function() {
/*selecting datepiker language*/
flatpickr.localize(flatpickr.l10ns.en);
/*declaring return datepicker*/
var FLATPICKER_RITORNO = flatpickr('#cal_DATA_RITORNO', {
altInput: true,
altFormat: "j F, Y",
dateFormat: "d-m-Y",
disableMobile: "true",
maxDate: new Date().fp_incr(365),
});
/*declaring outbound datepicker*/
$("#cal_DATA_ANDATA").flatpickr(
{
altInput: true,
altFormat: "j F, Y",
dateFormat: "d-m-Y",
disableMobile: "true",
minDate: "today",
maxDate: new Date().fp_incr(365),
defaultDate: "today",
/* setting initial date of return picker to the one selected in
outbound*/
onClose: function( selectedDates, dateStr, instance ) {
FLATPICKER_RITORNO.set( 'minDate', dateStr)}
});
} );
</script>
fixed this by adding setDate(dateObj) and changing the onClose event to onChange so code now will look like this
<script>
$(function () {
/*selecting datepiker language*/
flatpickr.localize(flatpickr.l10ns.en);
/*declaring return datepicker*/
var FLATPICKER_RITORNO = flatpickr('#cal_DATA_RITORNO', {
altInput: true,
altFormat: "j F, Y",
dateFormat: "d-m-Y",
disableMobile: "true",
maxDate: new Date().fp_incr(365),
defaultDate: "today"
});
/*declaring outbound datepicker*/
$("#cal_DATA_ANDATA").flatpickr(
{
altInput: true,
altFormat: "j F, Y",
dateFormat: "d-m-Y",
disableMobile: "true",
minDate: "today",
maxDate: new Date().fp_incr(365),
defaultDate: "today",
/* setting initial date of return picker to the one selected in
outbound*/
onChange: function (dateStr, dateObj) {
FLATPICKER_RITORNO.set("minDate", dateObj);
FLATPICKER_RITORNO.setDate(dateObj);
}
});
});
</script>
Hello I was asked to modify some code. We got something like this:
$("#expiration_datepicker").datetimepicker( "option", "disabled", false ).attr('value', '');
$("#expiration_datepicker").datetimepicker({
dateFormat: 'mm-dd-yy',
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm'
});
Looks like this is setting up the date picker
How Can I set it up to default show todays date and time??
like dd-m-yy hh:mm
just use setdate and new Date() for date/time right now
$(function() {
$("#datepicker1").datetimepicker({
dateFormat: 'dd-m-yy'
// your options
}).datetimepicker("setDate", new Date());
});
FIDDLE
Check the datepickers documentation for more customizations. Surely it have..
$("#expiration_datepicker").datetimepicker("option", "disabled", false).attr('value', '');
$("#expiration_datepicker").datetimepicker({
**dateFormat: 'dd-m-yy',** // date format goes here
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm' // time format here
});
Usage:
<script>
$('#expiration_datepicker').click(function() {
('#expiration_datepicker').datetimepicker('setDate', (new Date()));
});
</script>
Need to add .datepicker("setDate", "0") after the datetimepicker call. see the code below.
$("#expiration_datepicker").datetimepicker( "option", "disabled", false ).attr('value', '');
$("#expiration_datepicker").datetimepicker({
dateFormat: 'dd-m-yy hh:mm', // format goes here. Check its documentation for more.
showOn: 'button',
buttonImage: '../chassis/images/calendar.gif',
buttonImageOnly: true,
minDate: 0,
maxDate: '+5Y',
duration: '',
<c:if test="${formIsReadonly or form.newsItemId == '-1'}">
disabled: true,
</c:if>
constrainInput: false,
timeFormat: 'hh:mm'
}).datetimepicker("setDate", "0");
var d = new Date();
$("#VALUATION_DATETIME").datetimepicker({
showSecond: false,
dateFormat: "dd/mm/yy",
timeFormat: 'HH:mm',
}).datetimepicker("setDate", new Date());
Output:- 14/04/2022 17:40
Set date programmatically:
$('#inputID').datetimepicker("setDate", "05.01.2017 13:36");
I have 2 fields, DateFrom and DateTo, and a jquery date picker. If today is the 9th of February, I want the DateFrom field to show 01-Jan-2017 and the DateTo field to show 31-Jan-2017. How can I achieve that in this particular context ?
$(document).ready(function () {
$("#ddlDocument").change(function () {
$.ajax({
type: "POST",
url: serviceName + "/GetMIRReportValueAdmin",
data: "{'Value':'" + $(this).val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
processdata: true,
success: function (msg) {
var data = msg.d;
$('#infocontent-body').hide();
$('#divParams').html(data);
$('.date').datepicker({ constrainInput: true, duration: 'fast', gotoCurrent: true, dateFormat: 'd-M-yy', autoSize: true, showOn: 'focus',
changeMonth: true, changeYear: true, buttonImageOnly: true, buttonImage: baseUrl + 'Styles/Images/datepicker.gif',
minDate: new Date(curryear, 1, 1), maxDate: '+15y', yearRange: '1990:2030',
beforeShow: function (input, inst) { $(this).blur(); }
});
ProductList(); //If there is a product list
StatusList(); //If there is a status list
if ($("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Early Withdrawal Report") {
GetLifeCompanyList(); //If there is a fund list
$("#ddllifecompany").removeAttr('disabled');
}
else FinancialProductList(); //If there is a financial product list
//FundList(); //If there is a fund list
CompanyList(); //If there is a company List example RA and nonRA
if ($("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Investment Statement" || $("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Growth Report"
|| $("#ddlDocument").find('option').filter(':selected').attr("aosSubparameter") == "Actuaries Report") {
ProductFundList(); //If there is a fund list
GetLifeCompanyList(); //If there is a fund list
$("#ddllifecompany").removeAttr('disabled');
}
},
error: function (msg) {
alert('Failed to load the requested data.');
}
});
});
});
How about something like this?
var date = new Date(), y = date.getFullYear(), m = date.getMonth();
var firstDay = new Date(y, m-1, 1);
var lastDay = new Date(y, m-1 + 1, 0);
$( ".selector" ).datepicker( "setDate", firstDay );
$( ".selector" ).datepicker( "setDate", lastDay );
I tried adding dateFormat: "dd-mm-yy",
but then the rest of the functions just don't work.
Then I tried to change the format globally,
$.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
But it didn't work either.
I am using jquery-1.9.1, and jquery-ui-1.10.3.
$(document).ready(function formUi() {
var dateToday = new Date();
$("#datepicker-round-trip-1").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
maxDate: new Date(new Date($('datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday, maxDate: null });
}
else {
$("#datepicker-round-trip-1").datepicker('option', { minDate: dateToday });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("#datepicker-round-trip-2").datepicker("option", "minDate", newDate);
}
});
$("#datepicker-round-trip-2").datepicker({
numberOfMonths: 2,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
inline: true,
minDate: new Date(new Date($('#datepicker-round-trip-2').val()).valueOf()),
beforeShow: function () {
if ($("#datepicker-round-trip-1").val() == "" && $("#datepicker-round-trip-2").val() == "") {
$("#datepicker-round-trip-2").datepicker('option', { minDate: dateToday, maxDate: null });
}
},
onSelect: function (dateText, inst) {
var currentDate = new Date(dateText);
var valueofcurrentDate = currentDate.valueOf();
var newDate = new Date(valueofcurrentDate);
$("datepicker-round-trip-1").datepicker("option", "maxDate", newDate);
}
});
});
The script just sets the datepicker's minDate to the last date selected in the previous date picker. Any help or guidance is appreciated :)
Try this: http://jsfiddle.net/MXstJ/ or http://jsfiddle.net/gc4nM/
Helpful link: http://jqueryui.com/datepicker/
Hope this fits your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d',
dateFormat: 'dd-mm-yy',
defaultDate: new Date()
});
Since I am new to jQuery I have a simple question to the pro-users.
How do I print out on the screen the date from the datepicker?
How to assign the date from datepicker to a variable so I can use it later for using that date's with mySQL database manipulation.
Any help appreciated.
$(function() {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1, maxDate: 0,
dateFormat: "yy/mm/dd",
showAnim: 'clip',
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});
$( "#from" ).datepicker("getDate"); //to get the date
var date;
date = $( "#from" ).datepicker("getDate"); //to store it in a variable.
The API is useful if you need to do more with your datepicker.
http://api.jqueryui.com/datepicker/#method-getDate
you can use onSelect method to assign selected value to some variable. You can post that value to your controller and save it to database.
$(function() {
var selectedDate = "";
$("#from").datepicker( {
onSelect: function(date) {
alert(date);
selectedDate = date;
},
selectWeek: true,
inline: true,
startDate: '01/01/2000',
firstDay: 1
});
});
Use
getDate
it Returns the current date for the date picker or null if no date has been selected.
var fromDate= $( "#from" ).datepicker( "getDate" );
var toDate= $( "#to" ).datepicker( "getDate" );