Add a few months to bootstrap DateTimePicker calendar after change event - javascript

I'm using the date picker from eonasdan. I am trying to add three months to the second calendar as soon as I pick a date from the first. I have tried using the moment().add(3,'M') method, but it doesn't work as I am expecting it to.
I'm just trying to do two simple, interrelated, tasks:
Add three months to the second calendar's minDate
Display that date in the calendar's <input> field. The JS for the calendars is below.
$('#start-date').datetimepicker({
useCurrent:false,format: 'D-M-YYYY'
});
$("#start-date").on("dp.change", function (e) {
var probDate = new Date(e.date().add(3,'M'));
$('#probation-date').data("DateTimePicker").minDate(e.date);
});
$("#end-date").on("dp.change", function (e) {
$('#start-date').data("DateTimePicker").maxDate(e.date);
});
I tried to made a JSFiddle, but there's no way to include external files via a CDN for this widget. It's MomentJS knowledge that I lack here.

Related

get click date in addEvent modal

I'm working on a fullcalendar project.
When I click on a day of my calendar it appeared a modal where you put the name of your event, the start date and end date.
The input for start and end date is a datetime-local and I was looking for a way that when you click on a day and the modal show up in my start input is already visualize the day.
This is my modal and, for example, when I click on 4th of April it appeared directly like this, without me having to put it manually: like this ->example.
I found online this solution to get the clicked date:
dayClick: function(date, jsEvent, view, resourceObj) {
alert(date.format('DD/MM/YYYY 08:00')); //format i decide
},
But i dont know how to applied to my code to have it as input and not alert
I found also this way, I like it better because I can add the hour I want:
var startDateSelected = moment(event.startStr).format("DD-MM-YYYY 08:00:00");
var endDateSelected = moment(event.endStr).format("DD-MM-YYYY 17:30:00");
but still havent found a way to applied to my input datelocal-time
At the end I found this solution:
select: function select(event, date) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id);
var now = new Date(event);
document.getElementById('starts').value = now.toISOString().slice(0,16);
document.getElementById('ends').value = now.toISOString().slice(0,16);
}
This is the function that open my modal and fecth the events from my database by ID
And the ID mention in getElementById are from my two datetime-local input
I hope someone can find it useful.
It refered to Fullcalendar v3 because that the version the template I'm using have

how to change min date of kendo date picker: Jquery

I am creating a web app in which I have 2 date time textbox(txtFromDate, txtToDate), for which I am using Kendo-UI,
On my page load I am setting min date for my txtToDate
Which looks like below
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
the above code works properly and setting the min date for txtToDate textbox properly,
but the problem is
when user changes from date let say from (05/08/2019) to (05/20/2019)
the min date for txtToDate should be changed from 05/08/2019 to 05/20/2019
but nothing happens, below is my onchange function
$('#txtFromDate').change(function () {
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
});
how can I reset the min date for txtToDate Textbox?
I think the problem is that you're binding to the change event of the input, instead of the kendo widget.
Replace
$('#txtFromDate').change(function () {
with
$('#txtFromDate').data("kendoDatePicker").bind("change", function () {
Edited to add: you may also prefer to just use Kendo's date range picker

jquery datepicker textbox value issue

I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.
Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

Multi Dates Picker Bug?

I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.
The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle
I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready

asp.net AjaxControlToolkit CalendarExtender: setting displayed month programmatically from client side

Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.

Categories