Jquery dateTimePicker problem

Hello guys,
My datimepicker isn’t styled the way it should be, it is attached to an input field. Here it is:

And here is how it should look

So what’s the problem? Appreciate any kind of help.

I guess you haven’t included date picker’s css file.

no. I’ve included both date’s css and js files

Works for me:

wow, so weird. maybe I should reposition my css, script files?

I think you should post your code.

<head>
	<link rel="stylesheet" type="text/css" href="./style/bootstrap.min.css">
	<link type="text/css" rel="stylesheet" href="./style/jquery.simple-dtpicker.css"/>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="./style/mainpage.css">
</head>

<input type="text" name="date" id="date_time">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./script/bootstrap.min.js"></script>
<script type="text/javascript" src="./script/jquery.simple-dtpicker.js"></script>
<script type="text/javascript" src="./script/mainpage.js"></script>

And here is my code for date picker in “mainpage.js”

$(function(){
	$('#date_time').appendDtpicker();
});

Put jquery.simple-dtpicker.css as last css.

noo it didn’t help, the same picture, no changes :frowning:

Change
$('#date_time').appendDtpicker();
to
$('#date_time').datetimepicker();

In this case the calendar even doesn’t appear anymore, it’s gone

maybe you are overwriting the datepicker CSS’s ids or classes with some of your own, try changing the names of your css

yeah, that’s what I’m thinking about. but it’s just hard to change all, there are tons of lines of css, classes and ids :disappointed_relieved:

well, try to think about the ids and classes that are “general” or about “dates”

post your html and ill try to help out

<body>
    <!--**************************************  FIRST SECTION   ******************************************-->
	<section class="first-section">
		<div class="company-info">
			<div>
				<h1>Math Expert</h1>
				<p class="motto">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
			</div>
			<img src="./pics/header_icon.png">
		</div>
        <div class="row form-text-row">
        	<!--         TEXT          -->
			<div class="col-md-5 col-sm-12">
				<p class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>			
			</div>
            <!--         FORM          -->
            <div class="col-md-7 col-sm-12">
				<form action="" method="post" enctype="multipart/form-data">
					<div class="form-header">
                		<p>Fill in the order form to get the price</p>
                		<div class="tooltip-container icon-container">
	                		<img src="./pics/info2.png"/>
	                		<span class="tooltip">Lorem ipsum dolor sit amet</span>
	                	</div>
                	</div>
                	<div class="inputs">
                		<div class="subject">
	                		<span>Subject</span>
	                		<div class="input_fail_container">
		                		<select>
		                			<option value="no_value">Select Subject</option>
		                			<option value="math">Mathematics</option>
		                			<option value="chem">Chemistery</option>
		                			<option value="phys">Physics</option>
		                			<option value="hist">History</option>
		                		</select>
		                		<div class="fail-container"><p>Please select the subject</p></div>
		                	</div>
	                	</div>
	                	<div class="description">
	                		<span>Course<br>description</span>
	                		<div class="tooltip-container icon-container">
		                		<img src="./pics/info2.png"/>
		                		<span class="tooltip">Lorem ipsum dolor sit amet</span>
		                	</div>
		                	<div class="input_fail_container">
		                		<input type="text" name="description" value="">
		                		<div class="fail-container"><p>This field is required</p></div>
		                	</div>
	                	</div>
	                	<div class="level">
	                		<span>Level</span>
	                		<div class="level-container">
		                		<div><input type="checkbox" id="school" class="study-level"><!--
		                	      --><label for="school" class="level-check">High School</label>
		                		</div><!--
		                	 --><div><input type="checkbox" id="college" class="study-level"><!--
		                	     --><label for="college" class="level-check">College/University</label>
		                		</div><!--
		                	 --><div><input type="checkbox" id="phd" class="study-level"><!--
		                	     --><label for="phd" class="level-check">Masters/Ph.D.</label>
		                		</div>
		                	</div>
	                	</div>
	                	<div class="deadline">
	                		<span>Deadline</span>
	                		<div class="tooltip-container icon-container">
		                		<img src="./pics/info2.png"/>
		                		<span class="tooltip">Lorem ipsum dolor sit amet</span>
		                	</div>
		                	<div class="input_fail_container">
		                		<input type="text" name="date" id="date_time">
		                		<div class="timezone">Timezone</div>
		                		<div class="fail-container"><p>Please specify the deadline</p></div>
		                	</div>
	                	</div>
	                	<div class="solution-format">
	                		<span>Solution format</span>
	                		<div class="solutions">
		                		<div><input type="checkbox" id="option1" class="sol-format"><!--
		                	      --><label for="option1" class="level-check">Option 1</label>
		                		</div><!--
		                	 --><div><input type="checkbox" id="option2" class="sol-format"><!--
		                	     --><label for="option2" class="level-check">Option 2</label>
		                		</div>
		                	</div>
	                	</div>
	                	<div class="request-type">
	                		<span>Request type</span>
	                		<div class="input_fail_container">
		                		<select>
		                			<option value="no_value">Select type</option>
		                			<option value="math">Option1</option>
		                			<option value="chem">Option2</option>
		                			<option value="phys">Option3</option>
		                		</select>
		                		<div class="fail-container"><p>Please select the type</p></div>
		                	</div>
	                	</div>
	                	<div class="task">
	                		<span>Task</span>
	                		<div class="tooltip-container icon-container">
		                		<img src="./pics/info2.png"/>
		                		<span class="tooltip">Lorem ipsum dolor sit amet</span>
		                	</div>
		                	<div class="input_fail_container">
		                		<textarea></textarea>
		                		<div class="fail-container"><p>Task cannot be blank</p></div>
		                	</div>
	                	</div>
	                	<div class="upl-files">
	                		<span>Upload files<br>(if required)</span>
	                		<div class="input_fail_container">
		                		<label for="file-upload">+Add files...
		                			<input type="file" name="upload" id="file-upload" />
		                		</label>
		                	</div>
	                	</div>
	                	<div class="name">
	                		<span>Name</span>
	                		<div class="tooltip-container icon-container">
		                		<img src="./pics/info2.png"/>
		                		<span class="tooltip">Lorem ipsum dolor sit amet</span>
		                	</div>
		                	<div class="input_fail_container">
		                		<input type="text" name="name">
		                		<div class="fail-container"><p>This field is required</p></div>
		                	</div>
	                	</div>
	                	<div class="email">
	                		<span>Email</span>
	                		<div class="input_fail_container">
		                		<input type="text" name="email">
		                		<div class="fail-container"><p>This field is required</p></div>
		                		<div class="invalid-email"><p>E-mail is not a valid email address</p></div>
		                	</div>
	                	</div>
	                	<div class="confirm-email">
	                		<span>Confirm email</span>
	                		<div class="input_fail_container">
		                		<input type="text" name="email">
		                		<div class="no-email-match"><p>The email addresses do not match</p></div>
		                	</div>
	                	</div>
	                	<div class="submit">
	                		<input type="submit" name="submit" placeholder="Submit">
	                	</div>
	                </div>
					
				</form>
            </div>
		</div>
	</section>

    <!--**************************************  FIRST SECTION   ******************************************-->
	<section class="second-section">
		<div>
			<h2>Recently Completed</h2>
			<table>
				<tr class="image-tr">
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td rowspan="8" style="text-align: center;"><img src="./pics/header_icon.png"></td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>
				<tr>
					<td>Sample Text</td>
					<td>Sample Text</td>
					<td>Sample Text</td>
				</tr>					
			</table>
		</div>
		<div class="testimonials">
			<h2>Testimonials</h2>
			<div class="row" style="width: 100%; margin: 0">
				<div class="col-md-4 col-sm-4 col-xs-12">
					<p>Nostrud invenire eleifend ad pro. Semper integre appareat eu vis, nec clita officiis maluisset ex. Libris putant cotidieque sit et, utamur appellantur eu has. Duo ex impedit sensibus honestatis. Per ignota propriae incorrupte et, ea iusto facilisi per, ad quaeque hendrerit persequeris eum.</p>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<p>Nostrud invenire eleifend ad pro. Semper integre appareat eu vis, nec clita officiis maluisset ex. Libris putant cotidieque sit et, utamur appellantur eu has. Duo ex impedit sensibus honestatis. Per ignota propriae incorrupte et, ea iusto facilisi per, ad quaeque hendrerit persequeris eum.</p>
				</div>
				<div class="col-md-4 col-sm-4 col-xs-12">
					<p>Nostrud invenire eleifend ad pro. Semper integre appareat eu vis, nec clita officiis maluisset ex. Libris putant cotidieque sit et, utamur appellantur eu has. Duo ex impedit sensibus honestatis. Per ignota propriae incorrupte et, ea iusto facilisi per, ad quaeque hendrerit persequeris eum.</p>
				</div>
			</div>
		</div>
	</section>

    <!--**************************************        FOOTER        ******************************************-->
	<footer>
		<div>	
			<a href="#">Home</a>				
			<a href="#">How it works</a>				
			<a href="#">Get a quote</a>				
			<a href="#">Pricing</a>				
			<a href="#">FAQ</a>				
			<a href="#">Contact us</a>				
		</div>
		<div>	
			<a href="#">Solutions Library</a>				
			<a href="#">Privacy Policy</a>				
			<a href="#">Terms of Service</a>				
			<a href="#">Customer Support</a>							
		</div>			
	</footer>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="./script/bootstrap.min.js"></script>
	<script type="text/javascript" src="./script/jquery.simple-dtpicker.js"></script>
	<script type="text/javascript" src="./script/mainpage.js"></script>
</body>

Also you can see the website here https://hovhannesmkoyan.github.io/math-expert/

You can turn on Developer tools in browser and check css for any element using Inspector.
In your case as far as I peeked at your problem, you wrote element selector for table that applies to datepicker

table {
position: relative;
display: block;
border: 0px solid black;
margin: 0 auto;
margin-bottom: 60px;
}

Those rules applies and overwrites table style inside datepicker stylesheet. Debug :slight_smile:

1 Like

wow, finally, thanks, and that is the problem. Thanks to all :slight_smile: