I am using smDateTimeRangePicker to show a date-time picker dialog.
Along with this, I am using moment.js for date manipulation. For the date picker, I set minDate and maxDate in my controller as follows:
$scope.minDate = moment().subtract(5, 'months').format('DD-MM-YYYY');
$scope.maxDate = moment().format('DD-MM-YYYY');
I want to allow the user to select a date between today and 5 months before today's date.
But when I assign these values to the date-time picker, it is only allowing me to select today's date. All other dates are disabled.
Is there anything that I am missing or doing wrong?
Here's the plunker to an example which reproduces this issue: plunker example
You need to change the format of minDate and maxDate to match the format attribute
$scope.minDate = moment().subtract(5, 'months').format('MM-DD-YYYY');
$scope.maxDate = moment().format('MM-DD-YYYY');
and you haven't used expression binding for attributes in your template like below
max-date="{{maxDate}}"
min-date="{{minDate}}"
Working Plunker
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');
How i can change date format in Date Picker from (19/07/2015) to (2015-07-19)
my Date Picker file :
http://lirz.com/picker.date.js
I read the docs and it looks like this should work.
$('.datepicker').pickadate({
format: 'yyyy-mm-dd',
formatSubmit: 'yyyy-mm-dd'
})
I am using fuelux date picker and I have two date pickers on a page. Basically a start date and an end date. What I want to do is initialize both at the beginning and then when the user select a start date then restrict the end date picker to only have date starting from the start date that was selected by the user.
// Initialize datepickers
$('#startDate, #endDate').datepicker();
// When the start date changed by user
$('#startDate').on('changed.fu.datepicker dateClicked.fu.datepicker', function (evt, startDate) {
$('#endDate').datepicker('setDate', startDate);
$('#endDate').datepicker({
restricted: [{ from: '01/01/1900', to: startDate }]
});
});
Right now the set date works but restricted doesn't. Any solution?
You are trying to re-initialize the end date with different options which Fuel UX doesn't support. For your idea to work, you cannot initialize the end date until the start date is set.
Please review Destruction and re-initialization
I want to know how can convert any date that entered to text box using JQuery Datepicker to the ISO date format without the Timestamp. At the below you can find the code sample that I have used.
$("#to_date").datepicker({ maxDate: new Date(),dateFormat: 'yy-mm-dd'});
$("#from_date").datepicker({ maxDate: new Date(),dateFormat: 'yy-mm-dd'});
But when I pass these dates to a JSON web service it shows is invalid date. So what should I do?
Thanks & regards,
Chiranthaka
From original documentation:
Display the date in ISO format. Produces "2007-01-26".
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );