Search jQuery

jQuery Forum

Getting Started

muuucho

jquery datepicker

Answered

Need more info
Working on it
Answered

in Getting Started • 11 years ago

Hi!

I'm a newbie in javascript but have som e experience from php, but unfortunately not OOP. Any way, I have a site where user shall pick a startDate and an endDate and then click a submit button.

After that I validate the dates in PHP and then I'm going to insert them in a table.

However I would like to do more validation on the client side. What I want to do is follow:

1 Check if startDay is not already passed (already there)

2 Check if endDay is ahead of startDay

3 Check if endDay is no more than 14 days ahead of startDay

Best Regards, muuucho, Sweden

// Require the configuration before any PHP code as the configuration controls error reporting:
require ('./includes/config.inc.php');
// The config file also starts the session
// Require the database connection:
require (MYSQL);
$reg_errors=array();
// Include the header file:
include ('./includes/header.html');
/* PAGE CONTENT STARTS HERE! */
if (isset($_POST['arr'])){$arr=$_POST['arr'];}else{$arr=NULL;}
if (isset($_POST['dep'])){$dep=$_POST['dep'];}else{$dep=NULL;}
echo'<div id="box1">
<h3>Välj datum</h3>';
if (isset($_POST['dp'])){
//validate
$day=$arr;
//Check that
if(!preg_match('/\d{4}-\d{2}-\d{2}$/', $day) or !checkdate(substr($day,5,2), substr($day,8,2), substr($day,0,4))){
echo '<div class="error">Felaktigt Ankomstdatum!</div><br>';
$arr=null;
}elseif((mktime(0,0,0,substr($day,5,2),substr($day,8,2),substr($day,0,4)) < floor(mktime(0, 0, 0, date("m"), date("d"), date("Y"))))){
echo '<div class="error">Ankomstdag har redan varit. Vänligen försök igen! </div><br>';
$arr=null;
}
$day=$dep;
if(!preg_match('/\d{4}-\d{2}-\d{2}$/', $day) or !checkdate(substr($day,5,2), substr($day,8,2), substr($day,0,4))){
echo '<div class="error">Felaktigt Avresedatum!</div>';
$dep=null;
}elseif($arr!=null &&(mktime(0,0,0,substr($day,5,2),substr($day,8,2),substr($day,0,4)) <=(mktime(0,0,0,date(substr($arr,5,2)), date(substr($arr,8,2)), date(substr($arr,0,4)))))){
//datecheck arr/dep not ok
echo '<div class="error">Avresedag måste väljas senare än ankomstdag. Vänligen försök igen</div><br>';
$dep=null;
}elseif ($arr!=null &&(((mktime(0,0,0,date(substr($dep,5,2)), date(substr($dep,8,2)), date(substr($dep,0,4))))-
(mktime(0, 0, 0, date(substr($arr,5,2)), date(substr($arr,8,2)), date(substr($arr,0,4)))))/86400)>MAX_DAYS){
echo '<div class="error">Det går bara att boka '.MAX_DAYS.' nätter on-line. Vid längre bokningar, vänligen kontakta oss! </div><br>';
$dep=null;
}
if($arr && $dep){
echo"Ankomst: ".$arr;
$start_ts = strtotime($arr);
$end_ts = strtotime($dep);
$diff = $end_ts - $start_ts;
$stay= round($diff / 86400);
echo "<br>Vill stanna $stay dag/dagar";
}
}
?>
<form name="datepicker" action="index.php" method="post">
<p>Ankomst: <input type="text" name="arr" id="datepicker1" <?php if ($arr){echo'value="'.$arr.'"';}?>/></p>
<p>Avresa: <input type="text" name="dep" id="datepicker2"<?php if ($dep){echo'value="'.$dep.'"';}?>/><br /></p>
<input type="submit" class="formbutton" value="Sök lediga rum" name="dp" />
</form>
</div>
<?php
/* PAGE CONTENT ENDS HERE! */
// Include the footer file to complete the template:
require ('./includes/footer.html');
?>

Replies(3)

muuucho

Re: jquery datepicker

11 years ago

oops I forgot to add the head: Meanwhile I think I solved it (it seems to work, but I have just copied from other solutions on the web:

$(function(){
2:

3:
         $('#datepicker1').datepicker({
4:
            inline: true,
5:
            showWeek: true,
6:
            showOn: "button",
7:
            buttonImage: "images/calendar.gif",
8:
            buttonImageOnly: true,
9:
            minDate: -0
10:
         });
11:

12:
$("#datepicker1").change(function() {
13:
         test = $(this).datepicker('getDate');
14:
         testm = new Date(test.getTime());
15:
         testm.setDate(testm.getDate() + 1);
16:

17:
         $("#datepicker2").datepicker("option", "minDate", testm);
18:

19:
         });
20:

21:
$("#datepicker1").change(function() {
22:
         test2 = $(this).datepicker('getDate');
23:
         testm2 = new Date(test2.getTime());
24:
         testm2.setDate(testm2.getDate() + 10);
25:

26:
         $("#datepicker2").datepicker("option", "maxDate", testm2);
27:

28:
         });
29:

30:
         $('#datepicker2').datepicker({
31:
            inline: true,
32:
            showWeek: true,
33:
            showOn: "button",
34:
            buttonImage: "images/calendar.gif",
35:
            buttonImageOnly: true,
36:

37:
         });
38:

39:

40:

41:

42:
      });
43:
   </script>

kbwood.au

Re: jquery datepicker

11 years ago

Try this instead:

$(function() {
$.datepicker.setDefaults({showWeek: true, showOn: 'button',
buttonImage: 'images/calendar.gif', buttonImageOnly: true});
$('#datepicker1').datepicker({minDate: 0, onSelect: function(dateStr) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
}
var twoWeeks = $(this).datepicker('getDate');
if (twoWeeks) {
twoWeeks.setDate(twoWeeks.getDate() + 14);
}
$('#datepicker2').datepicker('option', {minDate: date || 0, maxDate: twoWeeks});
}});
$('#datepicker2').datepicker({minDate: 1, onSelect: function(dateStr) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
}
var twoWeeks = $(this).datepicker('getDate');
if (twoWeeks) {
twoWeeks.setDate(twoWeeks.getDate() - 14);
if (twoWeeks.getTime() < new Date().getTime()) {
twoWeeks = 0;
}
}
$('#datepicker1').datepicker('option', {minDate: twoWeeks || 0, maxDate: date});
}});
});

muuucho

Re: Re: jquery datepicker

11 years ago

Thank you very much. It works fine. I just change the name "twoWeeks" to "span" to make it moore ok to work with any allowing number of days.

This was not a mistake from your side, just me being unclear.

Thanks again & Best regards, Muuucho, Sweden

Top Reply

Response title

Attachments

jQuery Forum

jquery datepicker

Answered

Replies(3)

Re: jquery datepicker

Re: jquery datepicker

Re: Re: jquery datepicker

Statistics

Tags

Actions

Related Posts