I'm having a little difficulty programming the DateTextBox widget to operate with a month and year only input, and to put a mm/yy format in the DateTextBox. Can anyone help me tidy this up?
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<div id="dt_text" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="popupClass: 'dojox/widget/MonthAndYearlyCalendar'">
</div>
This DateTextBox JSFiddle shows my weak efforts so far. Alternative methods of getting a mm/yy textbox input without using these widgets are equally welcome.
Just to clarify, if you're going an alternative route, the important bit is a good mm/yy popup which I can use to inject the selected date into the textbox. I'm familiar with different types of text box djits, but not with date selector popups.
I'm using Dojo 1.8 and cannot upgrade so please make your answers compatible with this version
I have prepared two modules with screenshot to you which they both match your requirement.
Quickly changing year
Easy to select month and year
skip to select day
Modules:
DateTextBox with MonthAndYearlyCalendar View
MonthTextBox
<link rel="stylesheet" href="scripts/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="scripts/dojo/dojox/widget/Calendar/Calendar.css">
<script>
dojo.require("dojox.widget.MonthAndYearlyCalendar");
</script>
<body class="claro">
<input type="text" name="monthNyear" value="11/2013" data-dojo-type="dojox/form/DateTextBox" data-dojo-props="constraints:{datePattern: 'MM/yyyy'}, popupClass:'dojox.widget.MonthAndYearlyCalendar'" />
<input type="text" name="monthOnly" value="11" data-dojo-type="dojox/form/MonthTextBox" />
</body>
I suggest use ValidationTextbox, it is more earlier to use and meet your requirement too.
Here is the reference link and sample code you could copy and paste(tested in 1.8.3)
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<input type="text" name="monthNyear" id="monthNyear" value="12/99" required="true" data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="regExp:'\\d{2}\/\\d{2}', invalidMessage:'Invalid mm/yy'" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" />
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<body class="claro">
<input type="text" name="skippedDay" data-dojo-type="dijit/form/DateTextBox" data-dojo-props="constraints:{datePattern:'yyyy-MM'}" value="2013-12" />
PS: you can change the yyyy-MM to MM-yyyy to match your format.
But I tried that, the default value will be ignore. (in version 1.8.3).
PS2: users still needed select the day in popup calendar, but the textbox will not show and submit the day.
Related
I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">
This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});
Updated fiddle
Source
I was working on a website and I wanted to add a range date picker form. As I am doing that I keep on getting this error:
Uncaught TypeError: Cannot read property 'firstChild' of null"
I tried everything and searched everywhere but couldn't find any solution. I get the same error while trying to incorporate the auto-complete google maps plugin as well.
<div class="container">
<input type="text" name="datarange"/>
</div>
The above is the HTML where I am using the datepicker.
<script>
$('input[name="daterange"]').daterangepicker();
</script>
The above is the script tag.
I am getting the source code and documentation from http://www.daterangepicker.com/
$(document).ready(function(){
$('input').daterangepicker({});
});
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<div class="container">
<input type="text" name="datarange"/>
</div>
Please check the Query selector and the library you have added properly
and check the code below working.
thanks hope code might help you.
Check this link Fiddle Code
I just use Theme Roller and download the theme I couldn't implement it
I have tried to import files, however while I add an input for date picker it is still only textbox... How to use this I only need "Datepicker" What am I doing wrong ?
Appreciate any help.
<html>
<head>
<script src="~/Content/jquery.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<input id="date" type="text" />
</div>
</body>
</html>
<script>
$(function() {
$('#date').datepicker();
});
</script>
These are enough to make the custom ThemeRoller work(and of course add the images)
<link href="~/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Hope it will help to others who is seeking for jQuery UI Custom ThemeRoller Implementation.
I am trying to incorporate the jQuery UI datepicker function into a website I'm creating, but for some reason it's showing up translucent. I've read around and aparently it's caused from not linking the css file.
I've linked all of these files in the head in this order:
jquery-ui.min.css
jquery-ui.structure.min.css
jquery-ui.theme.min.css
jquery-1.11.3.min.js
jquery-ui.min.js
They all came from when I DL'd jQuery UI (except the jQuery v1.11.3 of course)
Then, in the form area I have:
<form id="purchase">
<fieldset class="purchase">
<input type="text" id="datePicker">
</fieldset>
</form>
and then in my javascript file I have:
$(function() {
$( '#datePicker' ).datepicker();
});
The result is the date picker shows up but it is transparent. I've been staring at this for hours thinking there's something obvious I'm missing but I just can't see it. Any help would be greatly appreciated.
Theres something up with your style sheet, not sure what it is but something is inserting an empty style tag into your head, replacing it with jquery-ui.css seems to fix it. Hope fully this works in the source as well.
Change
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
To
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.structure.min.css">
<link type="text/css" rel="stylesheet" src="css/jquery-ui.theme.min.css">
I have a piece of code which works fine in Angular 1.2 without including Bootstrap, but when I use the selectpicker class of Bootstrap the data binding is not happening. Below is the piece of demo code.
<html ng-app>
<head>
<script src="assets/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrap-select.js"></script>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet" />
</head>
<body>
<div ng-controller='Contact'>
<select class="selectpicker" ng-model='selected_person' ng-options='person.name for person in people'>
<option value="">Choose option</option>
</select>
<br>
Selected name = {{selected_person.name}}
</div>
<br>
<script>
$('.selectpicker').selectpicker();
function Contact($scope){
$scope.people = [
{name:"Abc",number: 65},
{name:"Xyz",number: 75},
{name:"Pqr",number: 85}
];
}
</script>
</body>
</html>
You don't want to have have some jQuery in a file and some AngularJS in another file, usually. If jQuery creates elements etc, they probably won't be picked up by angular.
The correct solution is to use an Angular directive. Here, it looks like somebody made one for you.
angular-bootstrap-select
this is what i got for you, the question asked in stackoverflow the same answer I copied for you see here docs download here