Datepicker with dynamically blocked dates from DB using AngularJS and PHP - php

I've been scanning the internet for a datepicker that checks in a DB if dates are available or not in the current month, but to my surprise haven't found one! Does anyone know of an datepicker like this? Or any suggestions of a AngularJS datepicker that I can build off of? Hopefully without using jQuery, to not have to include a lib when AngularJS is already loaded.
My idea is that dates in a month are all blocked until that month has been loaded, and when progress bar disappears, available dates are selectable.
Thanks!

You can use angular datetime picker directive.
https://angular-ui.github.io/bootstrap/#!#datepickerPopup
It proivdes props for disable selected date.
As well as you can use Kendo UI datepicker,
https://demos.telerik.com/kendo-ui/datepicker/angular.
To disable any dates you need to retreive all the dates from the database and initiate datepicker with disable dates properties.

Related

how to add date field in html showing like a calender

i am new to html and php i have created one railway ticket booking page in html .in that form page there are option where the user going to fill like start station,reach station and date, so how can i show date ,that is when the user click the date means it shows like a calender and the user select the appropriate date where planned to travel and i want to show next three month date from the current date like a calender. because we give permission to book the ticket before three month..so any one help me doing this in html..
and when the user select the date how can I get that selected date..
This can't be done in HTML alone, you need to use javascript, or even better, jQuery, which is a javascript library designed to simplify the creation of client-side scripts.
When using jQuery, as you can probably suspect, a lot of things already exist, including a date picker.
You can find more info on this page : http://jqueryui.com/datepicker/‎
I also encourage you to check out the other contents the jQuery UI site, as they are really useful to easily design richer forms.

How can I use the jQuery Datepicker UI to dynamically pull a list of available times for the specific date selected?

I want to be clear that I am not asking someone to write the code for me. I want to learn how to do this myself.
What I am trying to accomplish is this: I have a website where I need a user to be able to select a date and time for an appointment. What I would like to be able to do is have the user select a date from the jQuery DatePicker UI and use that selected date to dynamically populate a list of available time slots that I can display to the user so they can choose a time based on the available time slots. Similar to the way it's done on this page under step 3 - https://booking.maidsinblack.com/ .
I really want to learn this for myself, but I need a nudge in the right direction. I can get the jQuery DatePicker working on the page without an issue, but I am learning PHP/MySQL. What commands in PHP/MySQL will I need to send the chosen date from the calendar to PHP, use that to pull available times in MySQL, then send the related information back to the page for selection?
I really appreciate any help on this. Ive been searching Google for the past two hours attempting to find examples of what I am trying to do with no luck.

jQuery UI Datepicker - Being able to pick day or month

I'd like to know if there is any way to be able to select a whole month in jQuery UI's Datepicker while still being able to select a single day.
I tried 'hacking' it by adding an onClick event to the title div after page load, but switching months seems to completely replace the div, thus losing the onClick.
Are there any other solutions? Or maybe an alternative which offers this option?
Your onClick event should be enough. You just need to use a jQuery event handler that works for dynamic links.
If < jQuery 1.7, use: live()
Else If >= jQuery 1.7, use: on()
If you don't necessarily need it to happen in one datepicker, it might be less confusing to have two of them. Use one to select the start date, and use the other one to select the end date. Once the dates are selected, you will need validation to be sure the selected end date is not before the start date (assuming you want that behavior).
To convert jQuery date picker into mont picker will leads to you bulky code. There are many ways to do this the best one is to hide date blocks by a function over riding method. Any way you can use this plugin for month / year picker.
http://lucianocosta.info/jquery.mtz.monthpicker/
i thing you can but Datepicker in div id="anything"
then use live event click like this without hacking any original code
$("#anything .ui-datepicker-month").live('click',function(){
do any thing :) ;
});
I think this has already been posted here
jQuery UI DatePicker to show month year only
very similar but same effect essentially any date selected in the month displays the month only

Jquery Calander: While loading the page calendar should be selected the range based on Start_date and End_Date input

I am using Jquery Datepicker. In on of my module (PHP) when i am trying to add package details i need to show the date picker with already selected dates in other color. So that admin will not use those selected dates for new package.
Please help me. Thanks in advance.
Regards,
Prabu
I'm not clear on whether you're trying to limit the selection to a specific date range, or whether you want to disable arbitrary dates within a range.
If it's the former, you should be able to specify minDate and maxDate when initialising datepicker. See here.
If the latter, you should be able to use the beforeShowDay option. There's a nice explanation on this question. The second element of the return value is a class name - using that with some corresponding CSS will allow you to see the colour. You can stop it being selected at all by returning false as the first element of the return value.

jquery date and time picker

i am using jquery date and time picker in one my project where users can create an event. in the jquery datepicker, i have the option to select the today's date and future date and not the past date which is good for an event creattion website. but i am stuck with the time picker. for example, if i am in the event creation page(assume now time is 9.30am) and select date as 2010-08-05, then i click on the time field but the time field shows time that is already past i.e. time before 9.30, i cannot allow user to choose time that is before the current time. how can i valdiate this? or is there any way not to show the past time?
I am using php, if i decide to validate using php, how i am supposed to validate, which time I should use as base to check the user selected time? users can come from any country so how i am supposed to know which is past time for an user.
I use this http://labs.perifer.se/timedatepicker/, I use the first option and I can use the last option where users allowed to enter two fields which is good as we can know the duration and good thing is second field works based on the i/p in the first field but still this doesnt solve my past time issue.
please let me know if i am not clear.
regards
>> users can come from any country so how i am supposed to know which is past time for an user.
If I understand you well, the best way is to check at the client side(in javascript).
Here is the sample code .
$("#time").timePicker({
startTime:new Date() // pass the current time
});​
Then, the timePicker will omit the past and start from the current time.

Categories