I have this online reservation, and i have this problem, Is there a way i can highlight the unavailable days on the date picker?assuming i have inserted dates on the database. Here's my code for the date picker.
<input type="text" name="pick-up-date" id="pick-up-date" class="form-control datepicker" placeholder="mm-dd-yyyy">
Here's a screenshot:
Use beforeShowDay() function from jQuery check this
e.g., something like this,
var datesToDisable = ["2015-01-07","2015-17-07","2015-21-07"]; //you have to fetch the dates and put em in an array and wh7atever the format is.
$('#pick-up-date').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ datesToDisable.indexOf(string) == -1 ]
}
});
Should do the trick!
Related
I use this daterangepicker: https://github.com/dangrossman/daterangepicker
I receive a date from database: so the format is: YYYY-MM-DD
Web client don't necessary use this format.
I tried that
<input type="text" id="samplingsBuildDatePicker" name="receptionDate" class="form-control">
$('#samplingsBuildDatePicker').daterangepicker({
singleDatePicker: true
});
var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
$('#samplingsBuildDatePicker').data("daterangepicker").setStartDate(dateStart);
Current day is displayed instead of the first day of the year...
Edit
I added a text area
$("#remark").val(dateStart);
It's the correctly value who is displayed: 01/01/2018... date picker don't working
The problem is here var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
You are receiving date from DB in YYYY-MM-DD format and you want to convert to DD/MM/YYYY.
Check the below working example for how to do this:
var dateStart = moment("2018-01-01").format("DD/MM/YYYY");
console.log(dateStart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
So, make the following changes:
var dateStart = moment("2018-01-01", 'YYYY-MM-DD', true).format();
Change to:
var dateStart = moment("2018-01-01").format("DD/MM/YYYY");
You are Done!
Script(jquery) use to make input[date] accessible to multiple browser(datepicker)
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker <script src="js/realtime_validityScript.js">
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
**dateFormat: 'dd-mm-yy',**
maxDate: 0
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
2- PHP code for validating date format by user in case jquery is disabled (not working) - also not sure how to use DateTime::getLastErrors()
// specify your date's original format, in this example d/m/Y (e.g. 25/07/2014)
**$format = "d-m-Y";**
$date = DateTime::createFromFormat($format, $_POST['DateField']);
$date_errors = DateTime::getLastErrors();
if(? $date_errors[also dunno what to put here?] ) {
// createFromFormat returns false if the format is invalid;
echo 'Your date format is incorrect';
} else {
//change it to any format you want with format() (e.g. 2013-08-31)
$date->format('Y-m-d');
}
Original PHP code for getting my date: (my db access currently this format "Y-m-d")
if (empty($_POST["DateField"]) ) {
$errors['DateField'] = "Age is required";
} else {
$date = date("Y-m-d", strtotime( $_POST['DateField']));
}
I also want the input date to be able to convert formats like those ('d-m-Y', 'Y/m/d', 'Y.m.d', 'd.m-Y', 'd/m/Y') to 'Y-m-d' maybe with an array of some sort?
Note: if i remove the 2- part my code work fine
Thanks you for your support...still new to PHP would really help if someone could expl to me what wrong and what the correct code
Date type will not allow your required formats. so instead of using type="date" use type="text" and add a class date to the input field to initialise datepicker like,
....
$('input.date').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'dd-mm-yy',
maxDate: 0
},
....
And change HTML like,
<input type="text" class="date" ..../>
I am using pikaday module for datepicker, but the format comes as inappropriate format. I tried adding this line of code but still not working:
.config(['pikadayConfigProvider', function (pikaday) {
pikaday.setConfig({
numberOfMonths: 1,
format: "YYYY/MM/DD"
});
}])
This is how my html looks like:
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" pikaday="myPickerObject" name="time" ng-model="clas.class_.time" placeholder="Enter time" tabindex="3">
</div>
</form>
</div>
Also tried to add as an inline attribute
format = "yyyy/mm/dd"
still not working.
Any help
You can use moment.js and set the format by setting
defaultDate : moment().format("MMM YYYY")
this will be the initial input date display format.
For displaying/processing the date in other desired formats, use
var field = document.getElementById('datepicker');
var picker = new Pikaday({
onSelect: function(date) {
field.value = this.getMoment().format('Do MMMM YYYY');
}
});
use moment.js to set the date format:
var picker = new Pikaday(
{
field: document.getElementById('eDate'),
toString(date, format) { // using moment
return moment(date).format('MM/DD/YYYY');
},
});
quick update, if you don't want to use moment.js, you can fdo the following
new Pikaday({
field: document.getElementById('eDate'),
toString: function(date) {
var parts = [('0'+date.getDate()).slice(-2), ('0'+(date.getMonth()+1)).slice(-2), date.getFullYear()];
return parts.join("-");
}
})
this will produce 18-07-1980. You can change from '-' to '/' by changing return parts.join("-"); and you can rearrange parts to apply mm/dd/yyyy via parts array
I'm currently trying to create a filter that will allow me to select a date using jQueryUI datepicker. This date will then be compared to the value of a hidden input. The parent div of the hidden input will then be hidden using .hide() function if the hidden date is less than the date select using the picker.
<div data-value="I0001-APP0277-S" class="server_wrapper" style="display: block;">
<div class="detail_wrapper">....</div>
<input type="hidden" class="buildStart_hidden" value="4/25/2014 1:46:19 pm">
</div>
<input type="text" id="buildStart_filter" class="secondary_live_filter hasDatepicker">
Using this code:
$('#buildStart_filter').change(function(){
var date = $(this).val();
$('.buildStart_hidden').each(function(){
if(date>$(this).val().split(' ')[0]){
$(this).parent().hide();
}
});
});
But using this code doesn't work. I think it may be due to the comparison of string values rather than date values. What can I change to make the comparison work?
Maybe:
You missing to remove the hour from DATE
date.split(' ')[0] > $(this).val().split(' ')[0]
After some more work I have figured out the problem.
I was trying to compare string types and not Date types.
This code is working now as hiddenDate and FilterDate are Date() types and thus can be evaluated using >= operator:
$('#buildStart_filter').change(function(){
var filterDate = $('#buildStart_filter').datepicker('getDate');
$('.buildStart_hidden').each(function(){
var hiddenDateStr = $(this).val();
var hiddenDate = new Date(hiddenDateStr);
if(filterDate>=hiddenDate){
$(this).parent().hide();
}else{
$(this).parent().show();
}
});
});
I have a page where the user can select three different appointment days using the jQuery UI Datepicker. When the user selects a day in the first field, I would like that date blocked out from the other two fields. I currently am also disabling Sundays, but cannot get dynamic date disabling working.
Appointment Time 1<br />
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." />
Appointment Time 2<br />
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." />
Appointment Time 3<br />
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." />
<script type="text/javascript">
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
</script>
<script type="text/javascript">
$(function() {
$("#appointment1_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment2_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment3_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
</script>
You can use the beforeShowDay function to set disabled dates.
See here for a full explanation.
To block out dates from the other fields, you have to obtain the date and do the comparison in your handling function. Given the code you provided, the following should work as a replacement for noSunday:
function noSunday(date) {
var day = date.getDay();
return [
(day > 0 &&
date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf()
),
''
];
};
Basically, not only do you want to make sure that day > 0 so that it isn't a Sunday, but also make sure that the date is not equal to the date given by appointment1_date. Using .datepicker('getDate') and comparing its valueOf() with date is the key.
You might want to rename it something like noSundayOrSelected or something equally descriptive.