I have problem with datepicker setDate option (I need to use server date in datepicker). I have display current date from server in that format (html source):
<div id="cur-date">27/11/2013</div>
In jquery script I try to set the setDate using this code:
$('#date_from, #date_to').datepicker({
beforeShowDay: noWeekendsOrHolidays,
defaultDate: '+1d',
minDate: '+1d'
}).datepicker('setDate', '#cur-date');
But it didn't work.
Any suggestion what is wrong?
first use text() not val()
val() is use for input type
$('#date_from, #date_to').datepicker({
beforeShowDay: noWeekendsOrHolidays,
dateFormat: "mm/dd/yy"
}).datepicker("setDate", $("#cur-date").text());
Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.Since you are added +1d it does not show the current date. For example 2 represents two days from today and -1 represents yesterday.
$('#date_from, #date_to').datepicker({
defaultDate: '+1d',
minDate: '0'
}).datepicker('setDate', '#cur-date');
Try removing the `minDate: '+1d'` or try commenting that part or even changing it to 0.
Working fiddle
http://jsfiddle.net/Uv8c5/
Use datepicker with these parameters
$('#date_from, #date_to').datepicker({
format: 'mm/dd/yy',
autoclose: true,
forceParse:true,
pickerPosition: "bottom-left",
startDate: $("#cur-date").text()
});
Related
Is there a way to add/change some code in this jQuery to show the date expire after some months or years that I specified?
For example, I designed a Membership Card for a client and this Membership Card is valid for 2 year and I want the script to add expire date.
Thank you
jQuery("#cd").datepicker({
dateFormat: 'dd/M/yy',
changeMonth: true,
changeYear: true,
yearRange: '2015:' + new Date().getFullYear(),
altField: "#acd",
altFormat: "mm/dd/yy"
});
You can set the date by calling the setDate option like
$( "#cd" ).datepicker("setDate", "+1y");
The second argument can be a number - denoting the number of days from now, or a string with "y" "m" and "d" suffixes like "+1y +5m".
$('#datetimepicker1').datetimepicker({ format: 'dd/mm/yyyy', pickTime:false})
when I used this code to pick date,it is picking minute instead of month.what might be the reason?
you should use MM:
$('#datetimepicker1').datetimepicker({ format: 'dd/MM/yyyy', pickTime:false})
see :MSDN Documentation on Js date formatting
http://eonasdan.github.io/bootstrap-datetimepicker/
Hi
I am trying to use the min max date options but not sure how to use it as the documentation doesn't provide example code.
I found on stackoverflow that you can do this:
minDate: moment()
But that throws an error that moment is not defined.
I am guessing it can't find the moment.js which is included on the page otherwise the plugin wouldn't work.
What I am trying to achieve is to disable 10 days before the current day and show 30 days from the current day.
Thanks
Here is the code (I have removed everything except whats important to simply show the code):
window[ns] = window[ns] || {};
(function ($, moment, app) {
'use strict';
// Private Methods
var nameSpace = 'global',
globalDataObject = null,
notifyRenderCallbacks = function (pageName) {
if ($('.js-calendar').length) {
$('.js-calendar').datetimepicker({
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
icons: {
next: 'icon icon-chevronright',
previous: 'icon icon-chevronleft'
},
enabledDates: moment().add(30, 'days')
});
}
},
// If this module requires global data
app.register(nameSpace, initialize);
}(jQuery, moment, window[ns] || {}));
To answer my question. The framework used required you to add moment to a config file otherwise it would not allow to use http://momentjs.com/ or any other JS - spoke to the person who set up the framework and they did it for security reasons.
Kasun's answer is correct but a better way to do this is to use Moment.js since datetimepicker is using this JS.
So to answer the 2nd part which is to disable 10 days before the current day and show 30 days from the current day you need to set the options as below. I didn't need to do the 10 days before but wanted only a set number of days to be available to select. I've added comments to make things clear but they shouldn't be there.
$mydatepicker.datetimepicker({
minDate: moment(), // Current day
maxDate: moment().add(30, 'days'), // 30 days from the current day
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
What the above will do is enable all the days between minDate and maxDate.
You could also directly enter the date range:
$mydatepicker.datetimepicker({
minDate: moment("12/01/2015"),
maxDate: moment("12/30/2015"),
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
And this will disable all days before and after the dates you entered into moment().
This is not part of the question but I wanted to display the current day in the input value when the calendar loaded but it wouldn't, instead it would show the placeholder text. I think its because of the use if minDate so I simply used jQuery to replace the value of the input.
$datepickerInput.val(moment());
var todayDate = new Date().getDate();
$('#element').datetimepicker({
timepicker:false,
formatDate:'Y/m/d',
minDate: new Date(),
maxDate: new Date(new Date().setDate(todayDate + 30))
});
By using this example you can give option to user to select date between today and next 30 days without using momentjs. You can provide value of minDate and maxDate accoording to you. For an example if you want to give options in between last 30 days to next 30 days, so set
minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))
Just give this way, using JavaScript Date Object:
minDate: (new Date()).getDate()
For disable
$("#editreservation_to").datetimepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
For Enable
$("#editreservation_to").datetimepicker({minDate:false,maxDate:false}).removeAttr('readonly');
I am using Datetimepicker for date and time input. But i am not able to understand what is the use of timezone option in it. I mean when i submit the input to datetime datatype in mysql and then select back what changes i am going to face because of timezone. I am not able to get it. Please help me. I am using this code for datetimepicker.
$(document).ready(function() {
$('#datepicker').datetimepicker({
showSecond: true,
dateFormat: 'yy-mm-dd' ,
timeFormat: 'HH:mm:ss',
showTimezone: true,
LocalTimezone: false,
stepHour: 1,
stepMinute: 1,
stepSecond: 10
});
});
I have found this
"showTimezone?: boolean; //Default: null - Whether to show the timezone selector not when selecting the date picker".
for more details please use this
https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery.ui.datetimepicker/jquery.ui.datetimepicker.d.ts
My guess:
not because of timezone but your dateFormat set doesn't match datetime type in your database.
try set dateFormat to YYYY-MM-DD
I am using date picker of jquery .As i use default it show year 2003 to 2023 only 20 values .
I need to increase this value .
when i use this code
$( "#inputBirthDate" ).datepicker({
changeMonth: true,
changeYear: true,
});
it show 20 values ..
BUt when I used this it is not showing, it show 2030 to 2050
$( "#inputBirthDate" ).datepicker({
changeMonth: true,
changeYear: true,
minDate: new Date(1990-01-01),
maxDate: new Date(2050-01-01),
inline: true
});
You can set the year range using this option per documentation here http://api.jqueryui.com/datepicker/#option-yearRange
yearRange: '1950:2013', // specifying a hard coded year range
or this way
yearRange: "-100:+0", // last hundred years
Actually your first piece of code is working correct. This is the default behavior of datepicker, check this demo and code.
min: current year -10 (2013 - 10 = 2003)
max: current year +10 (2013 + 10 = 2023)
However this can be cahanged using the following option.
yearRange: "-20:+0"