I am trying to create a dropdownlist of months, that renders with the current month selected:
#Html.DropDownList("Month",
new SelectList(Enumerable.Range(1, 12).ToDictionary<int, string>(
i => System.Threading.Thread.CurrentThread.CurrentUICulture.DateTimeFormat.GetMonthName(i)
), "Value", "Key", DateTime.Now.Month));
This builds the list just fine, but it always renders with January selected.
What am I doing wrong here?
HTML output:
<select name="Info.Month" id="dLMonth-451" data-val-required="The Month field is required." data-val-number="The field Month must be a number." data-val="true">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Code works for me on MVC4/.Net 4. What version of .Net and MVC are you using?
could add some of the HTML output?
Related
formType
->add("someday", DateTimeType::class, [
"date_widget" => "single_text",
"minutes" => ["00", "20", "40"],
"required" => true,
])
template
{{ form_widget(form.someday.date) }}
{{ form_widget(form.someday.hour) }}
{{ form_widget(form.someday.minute) }}
Generated HTML (on hour part)
<select id="form_someday_time_hour" name="form[someday][time][hour]">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13" selected="selected">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
In this case, selectbox of hour with leading zeros（00, 01, 02 ... 23）,
but I would like to change this selectbox without leading zeros(0, 1, 2 ... 23).
I would like to generate HTML of this format. (on hour part)
<select id="form_someday_time_hour" name="form[someday][time][hour]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13" selected="selected">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
I tried specifying the format in the form type, but there was no change.
Will there be options for the widget on the template side?
Thank you if you know.
Try the Twig date filter and specify the hour format without leading zeros like so:
{{ form_widget(form.someday.hour|date('h')) }}
Formats are specified using the DateInterval.format. I think that should work for you. Please try it.
EDIT #2
I'm not sure why you are getting that error. Maybe it's because the date filter is in the wrong place? Can you try this:
{{ form_widget(form.someday.hour)|date('h') }}
I'm not sure if that will fix it, but please try it. If that doesn't work, maybe you can tell me how you want the "date", "hour" and "minute" to be rendered in HTML format (update your question post to show that); then maybe we can use the formatting of the DateTimeType field.
EDIT #3
Why not try this then:
$hours = new array();
for ($i = 0; $i <= 23; $i++) {
array_push($hours, strval($i));
}
...
->add("someday", DateTimeType::class, [
"date_widget" => "single_text",
"minutes" => ["00", "20", "40"],
"hours" => $hours,
"required" => true,
])
I think that will work for you.
EDIT #4
Try this as well.
->add("someday", DateTimeType::class, [
"format" => "dd H mm",
"minutes" => ["00", "20", "40"],
"required" => true,
])
Then will be shown as drop down lists. Not sure why you were using date_widget???
Unfortunately, that's impossible.
https://github.com/symfony/symfony/blob/f7d9701cdfaf9be6b40f661d0d9ec973dc4b904b/src/Symfony/Component/Form/Extension/Core/Type/TimeType.php#L74
Looking at the code, recognized added leading zeros here.
If rewrite like this, it may be the expected behavior.
- $hours[str_pad($hour, 2, '0', STR_PAD_LEFT)] = $hour;
+ $hours[$hour] = $hour;
How do I scrape a list of items nested in a scrolldown menu?
To help contextualize, here is the chunk of the view source that I am trying to scrape from:
<!-- mp_trans_schedule_disable_start -->
<select name="confirm1$ddlLeavingFromMap" onchange="javascript:setTimeout('__doPostBack(\'confirm1$ddlLeavingFromMap\',\'\')', 0)" id="confirm1_ddlLeavingFromMap" class="input">
<option selected="selected" value="-1">Select</option>
<option value="429">Beamsville, ON</option>
<option value="438">Belleville, ON</option>
<option value="277">Brockville, ON</option>
<option value="273">Buffalo Airport, NY</option>
<option value="95">Buffalo, NY</option>
<option value="436">Burlington, ON</option>
<option value="424">Cambridge, ON</option>
<option value="440">Cobourg, ON</option>
<option value="278">Cornwall, ON</option>
<option value="434">Fort Erie, ON</option>
<option value="428">Grimsby, ON</option>
<option value="426">Hamilton GO Centre, ON</option>
<option value="425">Hamilton McMaster University, ON</option>
<option value="276">Kingston, ON</option>
<option value="279">Kirkland, PQ</option>
<option value="423">Kitchener, ON</option>
<option value="435">Mississauga, ON</option>
<option value="280">Montreal, PQ</option>
<option value="437">Napanee, ON</option>
<option value="124">Niagara Falls, ON</option>
<option value="449">Niagara Fallsview Casino, ON</option>
<option value="431">Oakville, ON</option>
<option value="433">Port Colborne, ON</option>
<option value="274">Scarborough, ON</option>
<option value="427">St Catharines, ON</option>
<option value="448">St. Catharines Brock University, ON</option>
<option value="315">TC Kingston</option>
<option value="310">Toronto Airport, ON</option>
<option value="145">Toronto, ON</option>
<option value="439">Trenton, ON</option>
<option value="422">Waterloo, ON</option>
<option value="432">Welland, ON</option>
<option value="275">Whitby, ON</option>
</select>
<!-- mp_trans_schedule_disable_end -->
I tried to focus on the CSS selector that is responsible for choosing an option, as well as, the option tag itself: puts agent.page.parser.css("select").text & puts agent.page.parser.css("option").text but both outputs turned up nil.
I also tried:
puts agent.page.parser.css("confirm1$ddlLeavingFromMap").text and form.field_with(:name => 'confirm1$ddlLeavingFromMap').options[1].click
Which also turned up nil.
and this:
require 'htmlentities'
require "mechanize"
a = Mechanize.new { |agent|
agent.user_agent_alias = 'Mac Safari'
}
#resultHash = {}
a.get("http://ca.megabus.com/BusStops.aspx") do |page|
parsedPage = page.parser
#resultHash[:some_data_name] = parsedPage.at_xpath("//h3[#class='right_col']").text.split(/\s+/).join(" ")
end
However, when I check to see if it turns up valid using rake -T -A, I get undefined method text for nil:NilClass. I do not know why.
I appreciate any feedback and thanks in advance!
1.you should choose language first
2.you should use correct css selector (consider use plugin from selectorgadget.com)
require 'htmlentities'
require "mechanize"
a = Mechanize.new { |agent|
agent.user_agent_alias = 'Mac Safari'
}
#resultHash = {}
a.get("http://ca.megabus.com/BusStops.aspx") do |page|
#you should choose language first
next_page = a.submit(page.forms[0], page.forms[0].buttons.first)
parsedPage = next_page.parser
#you should use correct css selector
#resultHash[:some_data_name] = parsedPage.at_css('#JourneyPlanner_ddlLeavingFrom').text
p #resultHash[:some_data_name]
end
On a select dropdown, I need to make certain items 'strong/bold'.
How can I do this?
Example of what I ideally require:
<option value="#"><strong>Andorra</strong></option>
<option value="#">--Grandvalira</option>
<option value="#">--Vallnord</option>
<option value="#"><strong>Austria</strong></option>
<option value="#">--Amadé</option>
<option value="#">--Bad Kleinkirchheim</option>
<option value="#">--Mallnitz</option>
You actually can't.
The closest thing (you can't choose a bold item)
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
Which gives you this:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
You can also build one of your own but it won't be input an input tag (you should use inputs of your own).
you could use :nth-child(N)
option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}
Demo: http://jsfiddle.net/Sotiris/sqshN/
Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild
Using css in the works as a quicker, easier alternative
<option value="value" style="font-weight: bold;">SELECT ME</option>
You could do it with jQuery.
$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));
You'd have to add some logic to determine which options to bold, obviously.
This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold
<style>
.bld {font-weight:bold;}
</style>
<select>
<option value = "1">Kanakangi
<option value = "2">Ratnangi
<option class = "bld" value = "8">Hanumatthodi
<option value = "9">Dhenuka
<option class = "bld" value = "15">Mayamalavagowla
<option value = "16">Chakravaaham
</select>
For this portion of code
<label for="gender">I am:</label>
<select class="select" name="sex" id="sex">
<option value="0">Gender:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
W3C Validator giving this error reference to non-existent ID "gender"
How to solve this?
Edit
Getting here also
reference to non-existent ID "birthday"
<label for="birthday" class="birthday">Birthday:</label>
<div class="field_container">
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<select id="birthday_day" name="birthday_day">
<option value="-1">Day:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="birthday_year" name="birthday_year">
<option value="-1">Year:</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
</select>
</div>
Change the value of the for attribute in the label element:
<label for="sex">I am:</label>
Edit to add:
Your second example is more complicated, because you're using one label for three input fields.
I'd recommend something like the following:
Add the following CSS rule to your site:
.hidden_label {
font-size:1px;
height:0;
line-height:0;
margin:0 0 0 -1000px;
text-indent:-9999px;
}
Then update your form:
<div class="birthday">Birthday:</div>
<div class="field_container">
<label for="birthday_month" class="hidden_label">Birthday Month</label>
<select name="birthday_month" id="birthday_month" class="">
<option value="-1">Month:</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
<label for="birthday_day" class="hidden_label">Birthday Day</label>
<select id="birthday_day" name="birthday_day">
[...]
</select>
<label for="birthday_year" class="hidden_label">Birthday Year</label>
<select id="birthday_year" name="birthday_year">
[...]
</select>
You want to do two things:
Have a visually appealing form for your users, and then for those users that are using assistive technology, provide some additional helpers along the way. Using the CSS class I defined above, you are ensuring that screen readers will still see the elements and read their contents when the user moves into the form elements, while hiding all the additional labels from the visual site.
There is no id="gender" or name="gender". You are using sex. Either use sex or use gender. Keep it consistent.
I have a web page that uses three controls to allow a user to specify a date: 2 drop down controls for month and day (where Jan = 1, perhaps a bad choice :-)) and the days of the month (1-31). A text box is used for the year. In the Year text box, I use an AJAX Toolkit Watermark extender found [here][1] to write the literal word "Year" in light grey in the text box. This text disappears when the user sets focus to the text box. If the user enters something in the text box, the text appears in the normal textbox color, else the light grey text "Year" re-appears when the textbox loses focus.
3 control make up a "Date Issued" text box and similarly, 3 more control make up a "Expiration Date" set of controls.
When a user changes the Issue date (for example, the focus of the last control, Issued Year, is lost, I'd like to update the Expiration Date controls to a date value that is 10 years from the Issue date.
The issue is this: If I use Javascript to set the value of the txtExpireYear control, it updates the light grey text watermark text that normally says "Year" to the year number value instead of displaying the value in normal text color and treating the value as if it were typed by the user.
The 2nd issue that I have is getting the year value of the IssueDate. Why does the dtmDateOfIssue.getYear() function return a two-digit year if the year is <2000 and itherwise return a 4-digit year if the year is > 2000? I can probably work around this but I am looking for an explanation.
Thanks in advance.
function txtIssueYear_OnBlur() {
//Get sub controls of passport Expiration date
var ddlExpireMonth = document.getElementById("dtmPassportExpirationDate_ddlMonth");
var ddlExpireDate = document.getElementById("dtmPassportExpirationDate_ddlDate");
var txtExpireYear = document.getElementById("dtmPassportExpirationDate_txtYear");
//Get the individual values of each sub control of the Expiration date
var ExpireMonth = parseInt(ddlExpireMonth.value);
var ExpireDayOfMonth = parseInt(ddlExpireDate.value);
var ExpireYear = parseInt(txtExpireYear.value);
//If the Expiration Date still contains all the default values, set it to a default
//value based on the value of the Date of Issue
if ( ExpireMonth == -1 && ExpireDayOfMonth == -1 && (isNaN(ExpireYear)) ) {
//Get sub controls of passport Issue date
var ddlIssueMonth = document.getElementById("dtmPassportDateOfIssue_ddlMonth");
var ddlIssueDate = document.getElementById("dtmPassportDateOfIssue_ddlDate");
var txtIssueYear = document.getElementById("dtmPassportDateOfIssue_txtYear");
//Get the individual values of each sub control of the Issue date
var IssueMonth = parseInt(ddlIssueMonth.value);
var IssueDayOfMonth = parseInt(ddlIssueDate.value);
var IssueYear = parseInt(txtIssueYear.value);
var dtmDateOfIssue = new Date(IssueYear, IssueMonth - 1, IssueDayOfMonth); //construct Issue date
//add 10 years - 1 day to get the default Expiration date
dtmDateOfIssue.setYear(dtmDateOfIssue.getYear() + 10);
dtmDateOfIssue.setDate(dtmDateOfIssue.getDate() - 1);
//Set the Expiration Date
txtExpireYear.value = dtmDateOfIssue.getYear();
ddlExpireMonth.value = dtmDateOfIssue.getMonth() + 1;
ddlExpireDate.value = dtmDateOfIssue.getDate();
}
The 3 controls of each date group are included in a usercontrol (ASCX file):
<asp:DropDownList ID="ddlMonth" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlDate" runat="server">
</asp:DropDownList>
<asp:TextBox ID="txtYear" runat="server" Width="85px" ></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
EnableClientScript="true" Required="True"
ErrorMessage="CustomValidator" ClientValidationFunction="validateDate"
ValidateEmptyText="True"></asp:CustomValidator>
This is sent to the browser as the following. Note that the event handler that I am writing Javascript for uses the client side IDs because the client sided script is page-specific. Not sure if that will be clear or will make sense to you. I would prefer an example using the final client side names, but if you again want to offer the <%- servercontrol.ClientId %> approach too, I would be willing to give it a try.
THANK YOU!
<select name="dtmPassportExpirationDate$ddlMonth" id="dtmPassportExpirationDate_ddlMonth" class="DefaultDropDown">
<option value="-1">--Month--</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option selected="selected" value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
<select name="dtmPassportExpirationDate$ddlDate" id="dtmPassportExpirationDate_ddlDate" class="DefaultDropDown">
<option value="-1">--Day--</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<input name="dtmPassportExpirationDate$txtYear" type="text" value="2009" maxlength="4" id="dtmPassportExpirationDate_txtYear" class="DefaultTextBox" style="width:68px;" />
<input name="dtmPassportExpirationDate$btnClear" type="button" id="dtmPassportExpirationDate_btnClear" style="font-size: x-small; height: 20px;" value="Clear" tabindex="-1" onClick="ClearDate_dtmPassportExpirationDate();" /></td>
<input type="hidden" name="dtmPassportExpirationDate$TextBoxWatermarkExtender1_ClientState" id="dtmPassportExpirationDate_TextBoxWatermarkExtender1_ClientState" />
About your second issue, the getYear function is deprecated, you should use the getFullYear function instead.
Edit: To correctly set the value of a TextBoxWatermark extended control, you should use the MS Ajax $find function to get the object and call the set_Text function:
$find("ctl00_SampleContent_TextBoxWatermarkExtender2").set_Text('value');
or better using the server-side ClientID property of the control:
$find("<%=ExtenderControl.ClientID%>").set_Text('value');
I found the set_Text function by object inspection with Firebug, because it's a shame that there is no documentation of the Client-Side API of the Ajax Control Toolkit...