I have an issue with the eyecon datepicker (http://www.eyecon.ro/bootstrap-datepicker). I want it ('#date') to re-render (disabling different periods) each time I change the value on the select ('#room').
$(document).ready(function(){
var openDays = <?php echo json_encode($area_open_days); ?>;
$('#room').change(function(){
var room = $(this).val();
$("#date").datepicker({
onRender: function (date) {
if(openDays[room][date.getDay()] == 1)
return '';
else
return 'disabled';
}
}).data('datepicker');
});
});
Outside of the $('#room').change the code works, but of course doesn't update when I select a new value, so I think I need to re-render the datepicker... any help? Thanks!
Related
So what I'm trying to do is this:
The user basically chooses date with input type='date', but if the user clicks a checkbox right next to it, the input type='date' will be replaced with the current date and time. And here is the code I wrote:
function myFunction() {
if($("#checkbox").checked == true) {
$("#input_date").hide();
var now = new Date();
$("#current_datetime").text(now).show();
} else if($("#checkbox").checked == false) {
$("#current_datetime").hide();
$("#input_date").show();
}
}
In the #checkbox in html code, I have onClick="myFunction".
As well, #current_datetime, which is simple text in span tag, and #input_date are located in the exactly same spot on the page.
But the function just won't work. There is no change at all, no matter how many times I click the checkbox.
I appreciate very much for your help in advance.
You can format your date according to below then you can use it in input type='date'
$(document).ready(function(){
$("#currentDate").on('change',function(){
var checked=$(this)[0].checked;
console.log(checked)
if(checked){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
today = yyyy+'-'+mm+'-'+dd;
$("#Date").val((today))
}
else{
$("#Date").val('')
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='date' id='Date'/><input type='checkbox' id='currentDate'/>
hope this help you
<input type="date" id="input_date">
<input type="checkbox" id="checkbox" >
<p id="current_datetime"></p>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$('#checkbox').click(function(){
if($(this).prop("checked") == true){
$("#input_date").hide();
var now = new Date();
$("#current_datetime").text(now).show();
}
else if($(this).prop("checked") == false){
$("#current_datetime").hide();
$("#input_date").show();
}
});
});
</script>
Checked is a property, you can read the value with .prop(). Also, to change the input value you need to use .val().
<script type="text/javascript">
function myFunction() {
if($("#checkbox").prop('checked') == true) {
$("#input_date").hide();
var now = new Date();
$("#current_datetime").val(now).show();
} else if($("#checkbox").prop('checked') == false) {
$("#current_datetime").hide();
$("#input_date").show();
}
}
</script>
I have created one custom control for datetime picker in one control i have given three mode datetimepicker,timepicker and datepicker.For which i have created one property called CalenderMode of type enum which stores these three modes and which value i am given to the property according to that i am changing the datetimepicker,if i given timepicker then my timepicker is enabled,if i give datepicker then date picker is enabled and if i give datetimepicker then my datetimepicker is enabled this i am handling in jquery.
For validation of these i am given format from c# and that format i am using in client side but now problem is if my timepicker or date picker is enabled and from timepicker i am selecting time but in text box it showing date time this is same for the date picker also there also it is showing date time.
Here i am not understanding what is the issue.
My code of jquery where i am changing the mode of calender using assigning the value to property is
$(document).ready(function () {
$('.calendercssclass').each(function () {
var result;
var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
if (value == "timepicker") {
$(this).datetimepicker({
timepicker: true,
datepicker: false
//mask: true
});
}
else if (value == "datepicker") {
$(this).datetimepicker({
timepicker: false,
datepicker: true
// mask: true
});
}
else {
$(this).datetimepicker({
//mask: true
});
}
});
});
To give the format for validation i am using following code
function ValidateFormatOfDatecontrol(sender, args) {
debugger;
args.IsValid = true;
var format;
$('.calendercssclass').each(function () {
var result;
var value = $(this).closest('.DateControl').find("input[type=hidden][id*='CalenderTypeModeID']").val();
if (value == "timepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientTimeFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
else if (value == "datepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
else if (value == "datetimepicker") {
format = $(this).closest('.DateControl').find("input[type=hidden][id*='ClientDateTimeFormatID']").val();
var answer = $(this).val();
if (answer != '') {
//Moment.js inbuilt function for validating the date format .
args.IsValid = moment(answer, format, true).isValid();
}
}
});
}
server side code for giving format for validation is
this.clientDateFormat.Value = "MM/DD/YYYY";
this.clientDateTimeFormat.Value = "mm/dd/yyyy H:i A";
this.clientTimeFormat.Value = "H:i";
Screenshot for issue is
Can anybody help me for this?
Here You are using Rain Jquery so fromat of Rain for the time is different from the moment what you are using for the validation so following is the format for both
Rain Jquery Time Format : h:i A
Moment Time Format : h:mm A
Following is the sample code
Script
$(document).ready(function () {
$(".date").datetimepicker({
format: 'h:i A',
datepicker:false
});
$(".date").change(function () {
var format = "h:mm A";
$('#message').text(moment($(".date").val(), format, true).isValid());
});
});
Markup
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="date"></asp:TextBox>
<asp:Label ID="message" runat="server" CssClass="message"></asp:Label>
</div>
I'm checking a date entered with a datepicker control in jquery from an Html.TextBoxFor helper:
<%=Html.TextBoxFor(c => Model.mydate, new { #class = "datepicker", maxlength = 10, #onBlur = "chkDate"})%>
The datepicker mask for the textbox appears to be MM/DD/YYYY . So, my script checks for an underscore and displays an error. This works if the user igonores the datepicker and tries to enter a date freehand but not if the datepicker is used. When a date is chosen, the value passed to my script is still underscores and no value. Here's my script:
<script type="text/javascript">
$(document).on("blur", "input[name=mydate]",
function chkDate() {
var len = $("input[name=mydate]").val().length;
var date = $("input[name=mydate]").val();
var month = date.slice(0, 2);
var day = date.slice(3, 5);
var year = date.slice(6, 10);
alert("chkBirthday " + month);
if (month == '__') {
document.getElementById("MainContent_ErrorMessage").visibility = 'visible';
document.getElementById("MainContent_ErrorMessage").innerHTML = 'No date has been entered. Please enter a date';
}
});
There's an event onChange associated with datepicker. Is this what I should be using? If so, how do I specify that in my helper and what script changes do I need to make?
Try this,
$(document).on("change", "input[name=mydate]",function (){
var len = $(this).val().length;
var date = $(this).val();
var month = date.slice(0, 2);
var day = date.slice(3, 5);
var year = date.slice(6, 10);
alert("chkBirthday " + month);
if (month == '__') {
document.getElementById("MainContent_ErrorMessage").visibility = 'visible';
document.getElementById("MainContent_ErrorMessage").innerHTML = 'No date has been entered. Please enter a date';
}
});
Assuming you are using the popular JQuery UI's Datepicker, weirdly enough they are not entitled events but callbacks that can handle this event. See onSelect or onClose.
This code causes my save to either flash "404 not found" when in a modal dialog or goes to a blank white page when in a separate tab.
Heres the code:
<script>
function changeSelection()
{
var value = $('#typeSelect').val();
var div = document.getElementById('sigType');
if(value >= 1 && value <= 3)
{
var signalTypeOptions =
<?php echo json_encode( array_values( $signalTypeOptions));?>;
var selection = document.getElementById('valueSelect');
selection.innerHTML = '';
var i = 0;
for(optionText in signalTypeOptions[value])
{
var option = document.createElement('option');
option.innerHTML = optionText;
selection.appendChild(option);
}
$(div).show();
}
else
{
$(div).hide();
}
}
</script>
The code is used to update the dropdown options for a secondary select element (valueSelect) based off of an initial select element (typeSelect).
I found that when a value is selected in the dynamically populated dropdown, the html doesn't reflect the selection.
Here issue is to validate the datetimepicker and reset the values after page load.
In pageload validation is working properly but datetimepickers values are not reset.
After pageload having the both the issues values are not reset and validation is not working.
Here is the fiddle: http://jsfiddle.net/XHW3w/6/
enter code here:$("#filter-msg").kendoWindow({
modal: true,
visible: false
});
$("#reset").click(function () {
$("#datetimepicker1").val('');
$("#datetimepicker2").val('');
});
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});
Above is my code.
In the filter function the value for mindate and maxdate is coming back as null. This is because .data() has not stored the updated value from the datepicker.
I have updated your code to use the value of the datepickers as shown in the fiddle.
http://jsfiddle.net/XHW3w/9/
$("#filter").on("click", function () {
var mindate = $('#datetimepicker1').val(); // uses the val method
var maxdate = $('#datetimepicker2').val(); // uses the val method
var product = $("#products").data("kendoDropDownList").value();
var order = $("#orders").data("kendoDropDownList").value();
if (!mindate || !maxdate || !product || !order) {
var content = "";
if (!mindate)
content += "<div class=\"k-error-colored\">mindate is not defined!</div>";
if (!maxdate)
content += "<div class=\"k-error-colored\">maxdate is not defined!</div>";
if (!product)
content += "<div class=\"k-error-colored\">product is not defined!</div>";
if (!order)
content += "<div class=\"k-error-colored\">order is not defined!</div>";
$("#filter-msg").data("kendoWindow")
.content(content)
.center()
.open();
return false;
}
});