i am trying to use a date picker, but i am not sure how to pass the selected value to my textbox. I am using
http://docs.jquery.com/UI/Datepicker
Also i am using the datetime picker used here
http://plugins.jquery.com/node/2795/release?api_version%5B%5D=59
it says the CSS is attached but i dont see it and my datetime picker is not styled, here is my code
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascript/ui.datetimepicker.js"> </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script>
$(document).ready(function() {
$("#datetimepicker").datepicker();
});
<body>
<div id="content" class="divContent">
<div id="mainContent" class="divMainContent" style="text-align: left;">
<p>Reservations and RSVP for logged users<p>
<div id="datetimepicker"></div>
<input type="text" name="date" />
</div>
</div>
</body>
Apply the datepicker to the input element, not the div
<input type="text" id="myDateTime" name="date"/>
Apply datepicker
$('#myDateTime').datepicker();
You don't have to pass the value to your textbox.
You're using datepicker in the wrong element, you should do this:
$("#InputTextIDHere").datepicker();
.datepicker(); should be applied on the input box, not on the div,
<input id="datepick" name="datepick" type="text />
jQuery( "#datepick" ).datepicker();
Related
I'm trying to use Bootstrap Colorpicker to control the color of text from an input field. I want the add-on field attached to an input field but not the default associated hex input box.
Specifically, I have a text input field for Title and I want an add-on Colorpicker box next to the field that will govern its color (as displayed elsewhere). I can't figure out how to just use the Colorpicker add-on box without the standard hex input field.
How do I properly code an add-on for an unrelated input field and still retain the value in JS for use elsewhere?
Thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Style -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group">
<input type="text" class="form-control" name="title" id="title">
<!-- PROBLEM HERE: Doesn't show color box (and value doesn't seem to change) -->
<span id="cp1" class="input-group-addon colorpicker-component" value="#00AABB"><i></i></span>
</div>
</div>
</form>
</div>
</body>
JS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/js/bootstrap-colorpicker.js
<script type="text/javascript">
$('#cp1').colorpicker();
</script>
CSS
//SRC: https://github.com/farbelous/bootstrap-colorpicker/blob/master/dist/css/bootstrap-colorpicker.css`
You want to apply the selected color DIRECTLY on the input field content.
(which contains user's text for a "title", not an hex color number).
Okay... But BootStrap's colorPicker actually uses the input field to select a color using the keyboard.
So we have to "hack it" a little...
The good thing is that we can unbind the input's keyup event from colorPicker.
We'll then have to ensure the user's text will remain on colorPicker's changeColor event... And get the color number directly from the API (using .data('colorpicker')) to apply it to the user's text.
So here is the code as you wished it to act: (Run the snippet)
$(function() {
// Initiate the colorpicker
$("#cp").colorpicker();
// Unbind the keyup event from the input (which normally changes the color.)
$("#title").off("keyup");
// Define a variable for the user's text at global scope.
var titleText;
// Get the text value inputed by the user as soon as the colorPicker is accessed.
$('#cp-icon').on("mousedown",function(){
titleText = $("#cp>input").val();
//console.log( titleText );
});
// On color selection, affect the input's text with it.
$("#cp").on("changeColor",function(){
//console.log("change event");
var colorPicked = $('#cp').data('colorpicker').input[0].value;
$("#title").val(titleText).css("color",colorPicked);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<body>
<div class="container">
<form class="form-horizontal" action="process-campaign-creative.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="control-label">
Title
</label>
<div class="input-group" id="cp">
<input type="text" class="form-control" name="title" id="title">
<span class="input-group-addon colorpicker-component"><i id="cp-icon"></i></span>
</div>
</div>
</form>
</div>
</body>
Same on CodePen.
You should match the color inside input tag, not inside span
HTML:
<div class="input-group colorpicker-component ">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"></span>
</div>
JS:
$('.colorpicker-component').colorpicker();
I have problem with two datepickers on the same page, they just don't want to work together.
I have found topics connected to mine but they didn't solve my problem:
Conflict with two jquery datepickers on same page
Javascript two datepicker conflict
My fields looks like that:
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
Initialization looks like that:
$(document).ready( function() {
$(document).find('#date-filter-from').datepicker();
$(document).find('#date-filter-to').datepicker();
});
Now what happens. First datepicker I click works okey. Then when I click second it doesn't work at all OR when I pick a date it shows error in console:
Uncaught TypeError: Cannot set property 'currentDay' of undefined
I will appreciate any help or ideas.
Use a JQuery selector instead of $(document).find
$(document).ready(function() {
$('#date-filter-from').datepicker();
$('#date-filter-to').datepicker();
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="row">
<div class="col-xs-6 filter-from">
<input id="date-filter-from" type="text" class="form-control filter-value datepicker-field" data-filter-value="from">
</div>
<div class="col-xs-6 filter-to">
<input id="date-filter-to" type="text" class="form-control filter-value datepicker-field" data-filter-value="to">
</div>
</div>
Assume the following simple HTML:
<html>
<head><title>Test</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<href="#" id="doExport">Export Now</a>
<div id="exportPopup">
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
</body>
</html>
Now also assume that there is CSS that styles #exportPopup appropriiately and sets it to display:none initially. This brings me to two questions:
How do I make that hidden DIV (#exportPopup) show up right where the #doExport link is clicked?
How do I use the JQuery datepicker on those two input boxes?
For Question 2 I have already tried this:
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
and it just doesn't work when I click those boxes. I hope someone can enlighten me.
I have created a rough model at http://jsfiddle.net/santoshjoshi/32enE/1/
so basically used the jQuery dialog plugin you need to add following code open the dialog box
HTML Code
Export Now
<div id="exportPopup" style='display:none'>
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
JavaScript Code
$(document).ready(function (e) {
$("#dateFrom").datepicker();
$("#dateTo").datepicker();
});
$( "#doExport" ).click(function() {
$( "#exportPopup" ).dialog( );
});
also please have a look at jQuery dialog documentation to customize your popup/dialog
http://api.jqueryui.com/dialog/
'UPDATE'
used following resources
http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css ' Theme is smoothness'
I cant get jquery's date picker to work on my page. I have a forum post on codecall if anyone wants more details. Here's a link http://forum.codecall.net/topic/70462-copy-and-paste-date-picker-javascipt/. Here's my code that is associated with this page. When I click the text fields the datepicker doesn't show up. Why? Can anyone see the problem?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
<div id="dateField">
<p>
Start Date: <input type="TEXT"
name="start_date" id="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
name="end_date" id="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Switch your Id and name tags around. An ID attribute has to be inside of the $('ID').datepicker() , not name.
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});
</script>
<div id="dateField">
<p>
Start Date: <input type="TEXT"
id="start_date" name="startDate"
value="" />
</p>
<p>
End Date: <input type="TEXT"
id="end_date" name="endDate"
value="" />
</p>
<small>Dates Should be in the format DD/MM/YYYY</small>
</p>
</div>
Wrap your jQuery UI datepicker code in a <script> tag, and mark it as javascript with the type attribute. Use a single document ready block for your two datepicker calls. Ensure you're using the correct IDs of your elements.
<script type="text/javascript">
$(document).ready(function() {
$("#startDate").datepicker();
$("#endDate").datepicker();
});
</script>
How can I update just the tags / class="able", with the datepicker value thats
stored in the <input id="datepicker"> field?
Steps:
Click the "datepicker" input field; Date calendar opens.
Select your date; "datepicker" input field populated with selected date.
Click "Load" Button.
<span> tags with class="able" values are now equal to "datepicker" input field value.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery Pass Value Input to SPAN2</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div>
<p>Date: <input id="datepicker" type="text"></p>
<br>
<input type="Button" id="button1" Value="LOAD">
</div>
<span id="result1" class="able"> </span>
<span id="result2" class="able"> </span>
<span id="result3" class="able"> </span>
<span id="result4" class="baker"> </span>
<span id="result5" class="baker"> </span>
<span id="result6" class="charlie"> </span>
</body>
</html>
You need to bind an onclick event to the load button and inside the onclick function you need to set the span text like below,
$('#button1').click (function () {
$('span.able').text($('#datepicker').val());
});
DEMO
Here is the JQuery Code to do this:
$("span.able").text($("#datepicker").text());
What the above code does is, to select all the span tags, with class = "able". It then sets its internal text to the value present in your text box with ID = datepicker.
Here is the documentation for text() function:
http://api.jquery.com/text/
$("Load-button-selector").click( function(){
$("span.able").html( $("datepicker-filed-selector").val() );
});