I am using jquery datetimepicker. I used minDate to set the minimum date, a user can select. Now i want to make timepicker independent. So I am using hour and minute to set the default time, but its not working. Here is my code:
jQuery('#datetimepicker1').datetimepicker({
minDate: "06/20/2017",
hour : '06',
minute: '00'
});
It give me error:
Uncaught TypeError: option hour is not recognized!
Untested code, let me know if there is any problem:
jQuery('#datetimepicker1').datetimepicker({
minDate: "06/20/2017"
});
var myDate = new Date();
myDate.setHours(6);
myDate.setMinutes(0);
myDate.setDate(20);
jQuery('#datetimepicker1').datetimepicker("setDate", myDate);
Related
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'm using the following javascript: http://xdsoft.net/jqplugins/datetimepicker , and I want to achieve simple effect - when User selects today's day, it should show him only hours available from now until the end of the day, the previous time should be disabled. But when he choses any other day in the future - then the whole time should be available. I wrote the following function in JS:
<script>
var today = new Date();
var dd = today.getDate();
alert(dd);
var logic = function( currentDateTime ){
if( currentDateTime.getDay()==dd ){
this.setOptions({
formatTime:'g:i A',
format: 'd/m/Y h:i A',
minDate:'+1970/01/02',//today
minTime: //I don't know yet how to implement the current time
});
}else
this.setOptions({
formatTime:'g:i A',
format: 'd/m/Y h:i A',
minDate:'+1970/01/02'//today
});
};
jQuery('#datetimepicker').datetimepicker({
onChangeDateTime:logic,
onShow:logic
});
</script>
The problem is that that line:
currentDateTime.getDay()==dd
doesn't work, because in my case dd equals todays day of the month (e.g. 25), and currentDateTime.getDay() checks current day of the week (e.g. for saturday it's 6). Is there anyone who could help me with that issue? I know there are some other available solutions (other datetime pickers), but I cannot find any other that is as simple and elegant as this. Thanks!
You want to use getDate() which returns the day in the month, instead of getDay() which returns the day in the week.
You should read the Date reference page.
I want to set up automatic value of prameter 'firstday' in the fullcalendar. I have to manualy set number 0-6.
I would like to implement function:
var fday=new Date()
document.write([fday.getDay()])
to
firstDay: **HERE**
But I don't know how.
I need it for calendar where people may subscribe for a prayer.
If you want to set the firstDay you can do:
var yourDate = // Let's assume here you have your Date Object
$('#calendar').fullCalendar({
firstDay: yourDate.getDay()
});
If you want to set the firstDay based on the current day:
$('#calendar').fullCalendar({
firstDay: moment().toDate().getDay()
});
Keep in mind you cannot use:
moment().startOf('week').isoWeekday()
Because
moment.js Sunday = 7
fullCalendar Sunday = 0
how to set default time hours and minutes as 00:00 but if i pick hours and minutes picked value should come. My issue is current time is coming by default and current date is highlighting. i am using bootstrap date time picker
By using option i am changing like this but not working. if i change format like dd/mm/yyyy 00:00 all the time it is showing 00:00 even if i pick hours and minutes. pls help me to solve this issue
My code is
$(document).ready(function(){
$('#datetimepicker1').datetimepicker({
$('#datetimepicker1').datetimepicker("setHours",'00' );
});
$('#datetimepicker2').datetimepicker({
$('#datetimepicker2').datetimepicker("setMinutes",'00' );
});
Perhaps you can try initializing the date picker with a default date, instead of trying to explicitly set the values. (I'm not sure datetimepicker even has setHours/minutes methods.) For example, you might do something like:
var d = new Date();
// hours, minutes, seconds
d.setHours(0, 0, 0);
$('#datetimepicker1').datetimepicker({
defaultDate: d
});
Hopefully this works for you or at least points you in the right direction! :)
What's jquery you using? Is it here ?
You should try to use DateTimePicker jQuery. It's simple and very good.
jQuery('#datetimepicker').datetimepicker({
format : 'd/m/Y H:i',
defaultTime:'00:00',
formatTime:'H:i'
});
I have got problem with setting date to kendo ui date picker, I am successfully able to set the today date by using the following code :
var todayDate = new Date();
$('#createdonend').data("kendoDatePicker").value(todayDate);
I am not able to set the yesterday date by using following code
var todayDate = new Date();
var yesterdayDate = todayDate.getDate() - 1;
$('#createdonbegin').data("kendoDatePicker").value(yesterdayDate);
for the above function I am getting error like this
Microsoft JScript runtime error: Object doesn't support this property or method
in this file
/Scripts/kendo/2013.2.716/kendo.all.min.js
would any one pls help on this one why i am getting this error for setting yesterday date to kendo ui datepicker..
Many thanks In advance..
As #Niels said you have to use:
yesterdayDate.setDate(today.getDate() - 1);
for setting yesterday date but you need to have yesterdayDate initialized to today's Date before setting it to previous day since setDate only sets the day of the month.
So, the proposed code is:
// Create a "date" object with today's date
var date = new Date();
// Changes the day of the month to previous, this keeps in mind month and year changes
date.setDate(date.getDate() - 1);
// Set the new date
$('#createdonbegin').data("kendoDatePicker").value(date);
Running example in JSFiddle: http://jsfiddle.net/OnaBai/v7UPr/
You will need to use the following:
yesterdayDate.setDate(today.getDate() - 1);
getDate will get the number of days in the month, not a Date object.
The value returned by getDate is an integer between 1 and 31.
Sources:
getDate