I am using a timepicker to select the time with an interval of 15 minutes. I use the timepicker from this link.
I am unable to add the timepicker to the input text field using the onclick function. Here is some sample code of what I am trying to achieve. Please help me solve this issue.
index.html
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
.st{}
.et{}
#bod { font-size: small; margin:0px 0px 0px 0px; }
body{font-size:10px;}
......
<div id="bod">
<input type="text" id="timepicker_start1" value="" class="st"/>
<input type="text" id="timepicker_end1" value="" class="et"/>
</div>
<input type="button" id="Add" name="Add" value="Add" onClick="add()" />
<input type="hidden" id="tot" name="tot" value="1"/>
...
The javascript part of the page is:
<script type="text/javascript">
function add(){
var tot=document.getElementById("tot").value;
tot=parseInt(tot,10);
var i=tot+1;
$('#bod').append(i+". ");
var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
$('#bod').append(" ");
$('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
document.getElementById("tot").value=i;
}
$(document).ready(function(e) {
$('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
$('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
});
</script>
You got a typo: it's timepicker not timpicker.
Other than that you're good - the script is working - http://jsfiddle.net/FNww8/
Related
I have 2 single date daterangepickers. I have a button that is disabled. I want to enable it only after both are populated by dates. If not it has to be disabled.
This is my code:
let arr = ['one', 'two'];
arr.forEach(iv=>{
$(`#${iv}.input_value`).daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
autoApply: true,
}, function(the_date) {
$(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
$('#submit_data').removeAttr('disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>
Right now, it is enabling right after the populate one of the date fields. Is there anyways I can enable the button only of both fields are filled?
Add an object to store the dates, check if you have two dates
let arr = ['one', 'two'];
let dates = {};
arr.forEach(iv=>{
$(`#${iv}.input_value`).daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
autoApply: true,
}, function(the_date) {
$(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
dates[iv] = the_date;
if (Object.keys(dates).length > 1) {
$('#submit_data').removeAttr('disabled');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>
or you could just check both inputs with
if ($('#one').val() && $('#two').val()) {
$('#submit_data').removeAttr('disabled');
}
I have 2 datepickers in my web page and somehow one continue the other. I want them to work differently. Maybe its because of the object dateText but don't know how to clean it.
There are two scripts calling the same class
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.3.custom.css">
<script src="js/jquery.datepicker.extension.range.min.js"></script>
<script>
$(function() {
$('#date_range').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataF').val(extensionRange.datesText.join(','));
$('#date_range').val('DATA');
$('#datepicker').datepicker('selected','');
}
});
});
$("#date_range2").click(function(){
$('#date_range2').val(" ").datepicker({startDate: "+7d"});
});
</script>
<script>
$(function() {
$('#date_range2').datepicker({
range: 'multiple',
onSelect: function(dateText, inst, extensionRange) {
$('#dataS').val(extensionRange.datesText.join(','));
$('#date_range2').val('TILL');
}
});
});
</script>
Then I have
<input id="date_range" value="DATA:" />
<input name="dataF" id="dataF" type="text" size="50" />
<input id="date_range2" value="TILL:" />
<input name="dataS" id="dataS" type="text" size="50" />
Just try this sollution
example link http://jsfiddle.net/fMD62/
<input type="text" id="datepicker1" name="datepicker1" value="" />
<input type="text" id="datepicker2" name="datepicker2" value="" />
$(function() {
$("#datepicker1").datepicker();
$("#datepicker2").datepicker();
});
i try to fill/overwrite(if exists) an input field from an colorbox popup search form, but i dont get the variable back into my input field.
this is the mainpage:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<script>
$(function() {
var kid = $('#Kontaktname').val();
$("#Kontaktname").colorbox({
href:"contact_search_popup.php?s_contacts_id=" + kid,
iframe:true,
innerWidth:850,
innerHeight:400,
opacity:0.1,
overlayClose:false,
});
});
</script>
<p><input type="text" id="Kontaktname" value="1001" name="Kontaktname"></p>
<p id="test">
return value:
</p>
this is colorbox popup page:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<input type="submit" id="formSubmit" class="test" value="{Label1}" name="formSubmit">
<script>
$(document).ready(function() {
$("input.test").click(function() {
window.parent.$("#kontaktname").text($(this).val()); // works
window.parent.$("#test").text($(this).val()); // dont work !!!
parent.$.colorbox.close();
});
});
</script>
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>
Hi I'm new to javascript and dojo. I'm trying to use two dijit DateTextBoxes with the drop-down calendars to establish a date range for a query on a database. I want to restrict the dates available, once the begin or end date has been selected, so that its impossible to pick an end date that is chronologically before the begin date, and vice versa. I'm trying to apply the example called 'changing constraints on the fly' (about half way down the page) from the dojo reference here: http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html However, the constraints aren't working in my code. The only thing I'm really doing differently is using thetundra theme. Any suggestions would be greatly appreciated.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<div>
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('toDate').constraints.min = arguments[0];" />
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" required="true" onChange="dijit.byId('fromDate').constraints.max = arguments[0];" />
</div>
</body>
</html>
With the new, HTML5-conform attribute data-dojo-type introduced in Dojo 1.6, the way how widget attributes are parsed has changed as well (to validate in HTML5 too). Widget-specific attributes are now in an HTML attribute called data-dojo-props, in a JSON-style syntax.
To make your example work again, either put the onChange (and required) in data-dojo-props (note that you have to wrap a function around it):
dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true" />
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true" />
Or you use the old dojoType instead of data-dojo-type, then the onChange attribute would be parsed. Note that it would not be HTML5-conform, but in my opinion more elegant.
Searching for an effective date range and restrictions, where only can have a range in the past, adding the constraints max with echoing the date in this format Y-m-d, I manage to edit it like this, hopes this help.
dojo.require("dijit.form.DateTextBox");
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<form>
<label for="fromDate">From:</label>
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('toDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} "
/>
<label for="toDate">To:</label>
<input id="toDate" type="text" name="toDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: function() {dijit.byId('fromDate').constraints.min = arguments[0];}, required: true, constraints:{max:'<?PHP echo date(" Y-m-d "); ?>'} " />
<button onclick="dijit.byId('fromDate').reset(); dijit.byId('toDate').reset();" type="reset">reset</button>
<button type="">Generate</button>
</form>
I someday do some like:
dojo.require("dijit.form.DateTextBox");
some_function(minDate) {
dijit.byId('toDate').constraints.min = minDate;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<body class="tundra">
<input id="fromDate" type="text" name="fromDate" data-dojo-type="dijit.form.DateTextBox" data-dojo-props="onChange: some_function(this.value);">
I hope that it help you.
I never had any luck with the attributes in the template like that.
I ended up just handling it on the function I run when either change:
I have one with an attach point of "startDatePicker" and another with "endDatePicker". Here I'm setting the endDatePicker to add constraints based on the new startDate someone selected so it's dynamic:
this.endDatePicker.constraints.min = new Date(startDate);
this.endDatePicker.constraints.max = new Date();