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');
}
Related
When an existing entry for a process phase has a time like 13:53, opening the datetimepicker sets the time automatically to 13:00, so I could by accident change the time without realizing, just by opening the datetimepicker
Without open datetimepicker
With open datetimepicker
problem with datetimepicker
function createDateTimePicker(id, timePicker, lang) {
var displayTimepicker = (timePicker == true ||timePicker == 'true') ;
var dateTimePicker = $(id).datetimepicker({
showTimepicker : displayTimepicker,
controlType: 'select',
oneLine: true,
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm',
stepMinute: 5,
showOn: 'both',
buttonImage: '/assets/images/calendar.png',
buttonImageOnly: true
});
return dateTimePicker;
}
Is there a way or solution to have the same time as the textfield or the closest time within 5 minutes of the text field time in the datetimepicker?
$(function() {
$('#basic_example_1').datetimepicker();
});
var setDateTime = function() {
$('#basic_example_1').datetimepicker('setDate', (new Date()));
}
var clearDateTime = function() {
$('#basic_example_1').val('');
}
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
</head>
<body>
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div style="display:inline">
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
<button onclick="clearDateTime()">clear</button>
<button onclick="setDateTime()">now</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</body>
</html>
I have used jQuery datetimepicker plugin, hope it helps you!!!
I'm using jquery datetimepicker & i have two controls:
From
To
I want get after three month date in To control as per selected date in From control.
What U tried:-
$(function () {
$('.datePicker').datetimepicker({
});
$('body').on('blur', '.pcFrom', function () {
var fromDate = $(this).val();
$('.pcTo').val(fromDate);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
You will need to convert the value from the datepicker to Date() and then use .setMonth() by adding the desired number of month. Then you will need to re-format it again on the output field.
$('.datePicker').datetimepicker();
$(document).on('blur', '.pcFrom', function() {
var fromDate = new Date($(this).val());
var after3Months = fromDate.setMonth(fromDate.getMonth()+3);
$('.pcTo').val("" + (fromDate.getMonth()+1) + "-" + fromDate.getDate() + "-" + fromDate.getFullYear());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
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 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/
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();