crazychicken / t-datepicker Goto Github PK

Hi

As it doesn't use standard form inputs, it's not possible to use HTML5 validation to prevent form submit when the date field(s) haven't been populated. Is there any other way to achieve this?

BTW, thanks for making a really neat datepicker - it looks super smooth, and the CSS is really logical and easy to edit

BW

Hi There,

Great Tool!

A question/issue: The special days will only display on load for the first two months (in show mode) in focus. The special days do not show up default for other months when you are scrolling through the calendar.

They will show up once you select a date on any of the months in focus.

See screenshots attached.

Any chance this can get fixed?

Can you please advise if there is any fix for windows 8, edge and IE

Hello there.
I am using your t-datepicker plugin.
There's a problem with the plug. You can see it in the demo.
When Calendar is 1, I can't switch to January if I choose a date from December.
I think this is happening now, from 2019 to 2020.
I'm also sending you the same function.
Please help me with this problem.
Because it matters to me. Thanks in advance for your interest.

$('.t-datepicker').tDatePicker({
fnDataEvent: holiDays,
mergeDataEvent : true,
autoClose: true,
iconDate: '',
formatDate: 'dd-mm-yyyy',
limitNextMonth: 23,
limitDateRanges : 31,
numCalendar: 1,
titleCheckIn: 'Giriş Tarihi',
titleCheckOut: 'Çıkış Tarihi',
titleToday: 'Bugün',
toDayShowTitle: false,
titleDateRange: 'Gece',
titleDateRanges: 'Gece',
titleDays: ['Pt','Sa','Ça','Pe','Cu','Ct','Pa'],
titleMonths: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
dateCheckIn: '',
dateCheckOut: '',
});

is any update on going? calander not showing.

First of all, I would like to thank you very much for this awesome datepicker plugin.

Ok...

It is possible to customize the date format style on input form as something like this:

http://themebubble.com/demo/hotelluxe/video/

Thanks

Hello there. I do not want to automatically skip the next month when the check in date is selected from the 2nd calendar. I couldn't figure out what to do about it. Please help me.

Hi there,

First of all, really nice plugin!
I'm wondering if it is possible to use this when having the same check-in and check-out date. I want to use it for rentals, but these can be for a single day so logically i want it so the user would click only one day if they want to rent for one day only. I have tried to rewrite the script a bit to accomodate this functionality but i cannot see what will break based on this change.

https://t-datepicker.getqwerty.com/demos.html
how to make it always opened?

Hi thanks for this awesome plugin.Could you please help me how to disable dates after check in selected.When I click on check in I want to disable next days based on the minimum length of stay on that day so my checkout will be after minimum length of stay.
Thanks in advance

When the first date is selected in June, the other month buttons do not work. You can try it by clicking the link.
https://www.tatilpremium.com/tr/fethiye-uzumlude-ozel-havuzlu-kiralik-villa-albina

Example: June 23.

    $('.t-datepicker').tDatePicker({
        autoClose: true,
        durationArrowTop: 200,
        limitDateRanges: 91,
        limitNextMonth: 18,
        numCalendar: (screen.availWidth < 768) ? 1 : 1,
        dateCheckIn: '<?php echo $entry_date ?>',
        dateCheckOut: '<?php echo $release_date ?>',
        checkInDisabled: dayInDisabled,
        dateDisabled: dayDisabled,
        checkOutDisabled: dayOutDisabled,
        dateMonthPrice: false,
    }).on('afterCheckOut', function (e, dataDate) {
        $('html').removeClass('t-datepicker-open')
        tDatePickerControl()
    })

Hello thx for ur grate work! I have the problem) When i select checkin date and it more than checkout date, input with checkout date cleared. I was tried event "onChangeCI" and tried update with method 'updateCO' this give me error: Uncaught TypeError: Cannot set property 'innerHTML' of undefined. May be i'm doing something wrong ?) Can u help me?

This my code: `let datePicker = $('.t-datepicker');

let today = new Date();
let tomorrow = new Date();

tomorrow.setDate(today.getDate() + 1);
let getCheckIn = datePicker.find('input[name=checkin]').attr('data-value');
let getCheckOut = datePicker.find('input[name=checkout]').attr('data-value');

datePicker.tDatePicker({
startDate: today,
limitDateRanges: 31,
titleToday: 'Сегодня',
titleDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
titleMonths: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
iconArrowTop: false,
iconDate: '',
titleDateRange: '',
titleDateRanges: '',
titleCheckIn: '',
titleCheckOut: '',
dateCheckIn: getCheckIn ? getCheckIn : today,
dateCheckOut: getCheckOut ? getCheckOut : tomorrow,

}).on('onChangeCI', function (e, changeDateCI) {
datePicker.tDatePicker('updateCO', '2019-01-31')
});`

Hi, can i count how many Sunday between startDate and endDate?

I was having trouble getting highlighting to switch off, look into the code and found a solution to get settings.toDayHighlighted and settings.nextDayHighlighted to work, here is a diff:
--- t-datepicker_1.js 2018-12-12 11:32:31.000000000 +0000
+++ t-datepicker_2.js 2018-12-13 17:03:15.545034596 +0000
@@ -827,7 +827,7 @@
if ( Number(dayselect) === dataUTC[0] ) {
var this_picker = $(toDayElement[i]).parents('.t-datepicker')
if ( this_picker.find('.t-input-check-in').val() !== 'null'

•      || settings.toDayHighlighted !== false ) {
  

•      && settings.toDayHighlighted !== false ) {
         toDayElement[i].className = 't-start';
       }
     }
  

@@ -835,7 +835,7 @@
if ( Number(dayselect) === dataUTC[1] ) {
var this_picker = $(toDayElement[i]).parents('.t-datepicker')
if ( this_picker.find('.t-input-check-out').val() !== 'null'

•      || settings.nextDayHighlighted !== false ) {
  

•      && settings.nextDayHighlighted !== false ) {
         toDayElement[i].className = 't-end';
       }
     }
  

I'm try use setEndDate but when i trigger $(".t-datepicker").tDatePicker('setEndDate', '2022-12-30') it's returns console error like this, Uncaught TypeError: Cannot read property 'left' of undefined.

My code,
$('.detail-picker').tDatePicker({ // options }).on('selectedCI',function(e, slDateCI) { console.log(slDateCI) $('.detail-picker').tDatePicker('setEndDate', '2022-12-30') });

Hi.
I'm planning to use your beautiful plugin as picker only.

I've added the html code to my Bootstrap modal content.

The problem is the the height of my modal is small, and when I click on my picker div, the calendar is shown but it is not above the modal, it creates scroll.

I can't understand how to make calendar appear above all other html blocks on my page.

Thank you in advance!

In attachments there are what I have now, and what I really need.

Hello,
Here is my prblem : on large intervals, select the endDate does not 'jump' to it.
Example :
interval created: 2024-02-01 => 2024-08-31
Calendar closed.
After opening again the calendar, and selecting startDate, I would like to jump directly to the endDate (actually, I had to click month after month to the endDate).
How to do this ?
Thanx!

I am using t-datepicker an i am using in my project (https://webhungers.com/globb/globb_fixes_v1/) . When I am viewing this page n mobile click on depart and select any date from April 2023 it is going to top of position current month June 2022 . I am attaching t-datepicker-responsive.min.js . so please to resolve this issue
t-datepicker-responsive.min.zip

If you change your timezone to a negative timezone calendar dates doesn't show up. For example if you change your timezone to UTC -08:00 Pacific Time (US & Canada) it doesn't work.
please see the attachment

Hi!
Is there a way to select directly the month or the year ? It takes a while for birth dates d-for examples.
Thanx!

How to show only calendar? Always open calendar without check in/out?

It will be open by click button (to show modal and calendar in it)

We need to disable dates remove them from only the checkout dates. Can you please guide me on how we can remove it?

HI

i have added you datepicker, not working on minus timezone.

can you please check out .

Thanks in advance !!!

i tried to use this event but it's not working

Please check this
SS = https://prnt.sc/HRY0E0H8sYpW
SS = https://prnt.sc/rUlGNwWbH0AC

This date picker is just awesome, can you please tell me is there any way to work with only one date picker, I mean there is no date range, only one date picker and after selecting date, picker will close.

Hi, I'm using this control in a booking-like project and I see that on mobile devices (or in mobile simulator in browsers like firefox and chrome) the date we set as disabled are shown as enabled. Why?

So I inspect the javascript code ad I found two lines like this:

....
 if ( settings.dateDisabled != undefined && 'ontouchstart' in window === false ) {
.....

So I ask myself "why it does not sohw disabled dates on mobile????". I put the part "&& 'ontouchstart' in window === false" in a comment and upload modified javascript.

The question is: why do you insert this code? What would go wrong without "&& 'ontouchstart' in window === false"? I test my form with edited js and it seems to work like befors, with the advantage that now works correctly also on moblile visualization.

Some comments about this?

Thank you!

Fabio

Not sure if I'm missing something, but the calendar dates do not show in either the demos or my local install; It looks like the dates are not populating at all.

How do I disable a particular date? Let's say someone booked future dates and now I'm having look on the calendar.